javascript - Change one element on hover another - Stack Overflow

admin 管理员组

文章数量: 1086019

I've got following piece of html code:

<div class="header-menu hide-for-small">
    <ul id="primary-menu" class="subtext">
        <li id="menu-item-993"><a>X</a></li>
        <li id="menu-item-994"><a>Y</a></li>
        <li id="menu-item-995"><a>Z</a></li>
    </ul>
</div>
<div class="post-filter">..</div>

Plus the css:

.post-filter {
    display: none!important;
}

What I'm trying to achieve is to show .post-filter div only when hovered #menu-item-993. So im doing:

#menu-item-993:hover .post-filter {
    display:block!important;
}

But this just don't work. I've tried to put + or ~ between ..:hover and .post-filter - without success. What Im doing wrong?

I've got following piece of html code:

<div class="header-menu hide-for-small">
    <ul id="primary-menu" class="subtext">
        <li id="menu-item-993"><a>X</a></li>
        <li id="menu-item-994"><a>Y</a></li>
        <li id="menu-item-995"><a>Z</a></li>
    </ul>
</div>
<div class="post-filter">..</div>

Plus the css:

.post-filter {
    display: none!important;
}

What I'm trying to achieve is to show .post-filter div only when hovered #menu-item-993. So im doing:

#menu-item-993:hover .post-filter {
    display:block!important;
}

But this just don't work. I've tried to put + or ~ between ..:hover and .post-filter - without success. What Im doing wrong?

• javascript
• jquery
• html
• css
• hover

Share Improve this question Follow edited Sep 1, 2016 at 13:54 Mohammad 21.5k1616 gold badges5656 silver badges8484 bronze badges asked Sep 1, 2016 at 13:40 Julia GaldenJulia Galden 3991313 silver badges2626 bronze badges 2

• you would need to use js to toggle a class on (or show / hide) post filter when menu is hovered. It can't be done through pure css as there is no parent selector (which you would need to achieve what you want) – Pete Commented Sep 1, 2016 at 13:42
• Use javascript for this.....mouseover on menu-item993 calls function that adds display:block; to div.post-filter – The One and Only ChemistryBlob Commented Sep 1, 2016 at 13:43

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

Here's a mouseover (mouseenter) function:

$("#menu-item-993").mouseenter(function () {
    $(".post-filter").show();
}).mouseleave(function () {
    $(".post-filter").hide();
});

If this doesn't override the !important try this (assuming no other dependencies in JS on post-filter class):

$("#menu-item-993").mouseenter(function () {
    $("div.header-menu + div").removeClass("post-filter");
}).mouseleave(function () {
    $("div.header-menu + div").addClass("post-filter");
});

Code

 $("#menu-item993").mouseenter(function () {
     $(".post-filter").addClass('dispaly')
 }).mouseleave(function () {
     $(".post-filter").removeClass('dispaly');

});

Css

   .display
    {
     display:block;
   }

Add and remove the class of styling with Javascript. And you don't need !important on the initial css.

$("#menu-item-993").mouseenter(function(){
    $(".post-filter").addClass("showit");
}).mouseleave(function(){
    $(".post-filter").removeClass("showit");
});

See my JSFIDDLE

Here is a way using hover function and the show/hide functions

$('#menu-item-993').hover(function(){
  $('.post-filter').show();
},function(){
  $('.post-filter').hide();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-menu hide-for-small">
  <ul id="primary-menu" class="subtext">
    <li id="menu-item-993"><a>X</a>
    </li>
    <li id="menu-item-994"><a>Y</a>
    </li>
    <li id="menu-item-995"><a>Z</a>
    </li>
  </ul>
</div>
<div class="post-filter" style="display:none">..</div>

Try this toggleClass option

$("body").on("mouseover mouseout", '#menu-item-993', function(){
    $('.post-filter').toggleClass("show hide");
});

.post-filter {
  display: none!important;
}
.show
{
  display: block!important;
}
.hide
{
  display: hide!important;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-menu hide-for-small">
  <ul id="primary-menu" class="subtext">
    <li id="menu-item-993"><a>X</a>
    </li>
    <li id="menu-item-994"><a>Y</a>
    </li>
    <li id="menu-item-995"><a>Z</a>
    </li>
  </ul>
</div>
<div class="post-filter">text</div>

You can use hover function & add css to show and hide it

$("#menu-item-993").hover(function(){
  $(".post-filter").css('display','block')
},function(){
  $(".post-filter").css('display','none')
})

JSFIDDLE

<a id="thumbnail" href="#"><img src="http://dummyimage./150x150/0066ff/fff"></a>
<div id="title">filename.jpg</div>



#thumbnail {
display: block;
width: 150px;
height: 150px;
}

#thumbnail:hover + #title {
display: block;
}

#title { 
display: none;
color: #ffffff;
background-color: #000000;
text-align: center;
width: 130px;
padding: 10px; 
}

本文标签： javascriptChange one element on hover anotherStack Overflow