I am having a problem implementing the following code. I want to affect an element by hovering another element. This is my code.
<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>
I want to affect #hp
by hovering .first
. How can I achieve this result ?
You can use 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>
You can try like this:
<script>
$( document ).ready(function() {
$( "div.first a" ).hover(function() {
$( '#hp' ).fadeOut( 'slow');
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.