css - 悬停元素会影响另一个 div 中的另一个元素

Question

我有以下代码，我想这样做:当 .userPicture 悬停时，类名应该改变。我该怎么做？

<li>
    <a href="#" class="userPicture"></a>
    <div class="contentNew">
        <div class="date">17 Jul</div>
        <div class="description">
            <a href="#" class="name">Jose</a> published a product
        </div>
    </div>
</li>

Answer 1

这取决于您需要实现的目标。如果你只是想在鼠标悬停时设置元素样式，那么使用 :hover css 选择器会更好。但是，如果您需要一些额外的逻辑，则需要使用 javascript。

可以这样做:

 <li>
       <a href="#" class="userPicture" onmouseover="this.setAttribute('class', 'userPicture-hovered');" onmouseleave="this.setAttribute('class', 'userPicture');"></a>
          <div class="contentNew">
            <div class="date">17 Jul</div>
            <div class="description">
                <a href="#" class="name">Jose</a> published a product
            </div>
          </div>
 </li>

使用内联 javascript 的示例:https://jsfiddle.net/rw9dcg5d/

css 示例 :hover: https://jsfiddle.net/539wep5g/