I have an unordered list of elements, each list element has a frame, background, and an image within them. When you hover over the list element, the entire background changes to orange, and the text changes to white. But when I link the images within the `li` to other pages, everything works, except the text stopped changing to white when I hover. The background still changes to orange either way though, and the text color works perfectly as soon as I take out the `<a href "">` parts.

**HTML**

```
<ol id="selectable">
    <li class="ui-state-list">
        <b>Title</b>
        Text here should change to white when hovering over entire li element.
        </br>
        <h5 class="discProd">More text</h5>
        <a href="www.youtube.com">
            <img class="iconAlign" src="images/icons/videoIcon.png">
        </a>
    </li>
</ol>

```

**CSS**

```
h6 { 
    font-size: 12px; 
    color: #2D2D2D; 
    font-weight: 100; 
    line-height: 1.5em; 
}

.discProd { 
    font-size: 10px; 
    color: red; 
} 

#selectable { 
    list-style-type: none; 
    width: 900px; 
}

#selectable li:hover {
    background: orange; 
    color: white; 
}

.ui-state-list {
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(../images/Products/productBG5.png) 50% 50% repeat-x;
    /*searched bg gloss wave */
    font-weight: normal;
    color: #555555; 
}

.iconAlign {
    float: right;
    margin-left: 34px;
    margin-right: 8px;
    margin-top: -.2em;
}

```