懸停元素影響另一個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>