悬停元素影响另一个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/

Answer 2

如果你真的需要改变类的名称，你可以用javascript来做。但正如@Yura Yakym所说，css：hover可能是更好的方法。

var a = document.querySelectorAll(".userPicture"); 
 
for (var i = 0; i < a.length; i++) { 
 
    var defaultClassName = a[i].className; 
 
    a[i].addEventListener("mouseover", function() { 
 
    this.className = "userPicture-hover" 
 
    }); 
 
    a[i].addEventListener("mouseout", function() { 
 
    this.className = defaultClassName 
 
    }); 
 
}

.userPicture-hover { 
 
    background: #c00; 
 
}

<ul> 
 
    <li> 
 
    <a href="#" class="userPicture">User picture</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> 
 
    <li> 
 
    <a href="#" class="userPicture">User picture</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> 
 
</ul>