悬停一个元素并影响另一个元素

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>

悬停一个元素并影响另一个元素

Hover an element and affect another element

html

css

hover