懸停一個元素並影響另一個元素

Question

我在執行以下代碼時遇到問題。我想通過懸停另一個元素來影響元素。這是我的代碼。

<div class="banner"> 
    <div class="first"> 
      <a href="Http://www.nytimes.com"><b>T</b></a> 
    </div> 
    <div class="second"> 
     <ul class="navigation" style="; border-radius: 10px; "> 
      <p style="display: inline" id="hp"> 
       <a href="http://www.nytimes.com">Go Back To Home</a> 
      </p> 
      <li><a href="http://www.somelink.com">Women Fashin</a></li> 
      <li><a href="http://www.somelink.com">Men fashion</a></li> 
     </ul> 
    </div> 
</div> 

我想通過懸停.first影響#hp。我怎樣才能達到這個結果？

Answer 1

您可以使用General sibling selector~

.first:hover ~ .second .navigation #hp a { 
 
    color: red; 
 
}

<div class="banner"> 
 
    <div class="first"> 
 
    <a href="Http://www.nytimes.com"><b>T</b></a> 
 
    </div> 
 
    <div class="second"> 
 
    <ul class="navigation" style="; border-radius: 10px; "> 
 
     <p style="display: inline" id="hp"> 
 
     <a href="http://www.nytimes.com">Go Back To Home</a> 
 
     </p> 
 
     <li><a href="http://www.somelink.com">Women Fashin</a> 
 
     </li> 
 
     <li><a href="http://www.somelink.com">Men fashion</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

你可以嘗試這樣的：

<script> 
$(document).ready(function() { 
$("div.first a").hover(function() { 
    $('#hp').fadeOut('slow'); 
}); 
}); 
</script>