html - 列表元素中的链接干扰悬停样式

Question

我有一个无序列表的元素，每个列表元素中都有一个框架、背景和一个图像。当您将鼠标悬停在列表元素上时，整个背景变为橙色，文本变为白色。但是当我链接 li 中的图像时到其他页面，一切正常，除了当我悬停时文本停止变为白色。尽管如此，背景仍会变为橙色，一旦我取出 <a href "">，文本颜色就会完美地工作。零件。

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;
}

Answer 1

在你的 CSS 中使用它

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

并为更改后的文本添加一个跨度，它应该都可以正常工作；)

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