this fiddle

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>

Answer 2

首先，您发布的代码实际上完全符合您的要求。

但是有问题。

您将<img>元素浮动为block元素（图片默认为inline）。将块元素放在inline元素（<a>）中是灾难的一种方法（也就是在 {{中可以看到的在父元素范围之外的渲染） 3}} ）。

要避免这种情况，请移除float: right上的.iconAlign，而您可以将<a>元素设为块并将其浮动。您需要更改HTML的顺序，才能在<a><img></a>的开头设置<li>设置（假设您计划将元素显示在右上角，因为我我假设你是。）

您还在使用带有<ol>的ORDERED列表。正如字母所示，无序列表为<ul>。对于换行符，它也是<br />（适用于XHTML），而不是</br>（尽管在新浏览器中会产生相同的结果）。实际上您根本不需要</br>，因为所有标题元素（<h1>, <h2>...<h6>）默认为block元素，这些元素在开始之前和之后都有换行符。

this fiddle

......我所涵盖的内容。我使用自己服务器上的图标来演示图标放置。

PS - 同一协议用于<li> - 在应用display: block或float: left/right之前不是块元素。有关您的目标的更多信息将非常有用，我可以指出一个更明显的方向（例如使用position: relative/absolute设置偏移而不是float。

PPS - 在我的演示中，Firefox显示我的图标比Chrome中的图标小，只是因为您知道他们有不同的方式呈现.ico文件。

HTML：

<ul id="selectable"> <li class="ui-state-list"> <a href="www.youtube.com"> <img class="iconAlign" src="http://1054.fleeceitout.com/sites/all/themes/jack/favicon.ico" /> </a> <b>Title</b> Text here should change to white when hovering over entire li element. <h5 class="discProd">More text</h5> </li> </ul>

CSS：

h5 { 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; } a { float: right; margin-left: 34px; margin-right: 8px; margin-top: -.2em; } .iconAlign { /* no positioning done here since it's an inline element. position using the block element it's inside of - the <a> */ }

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

2 个答案:

首先，您发布的代码实际上完全符合您的要求。

this fiddle

HTML：

CSS：