在一個元素上更改另一個元素

Question

我有以下一段html代碼：

<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>

加上CSS：

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

我想要實現的是僅在#menu-item-993懸停時顯示.post-filter div。 所以我在做：

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

但這是行不通的。 我試圖將+或~放在..:hover和.post-filter -沒有成功。 我在做什么錯？

Answer 1

這是一個鼠標懸停（鼠標輸入）功能：

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

如果這不能覆蓋！important，請嘗試以下操作（假定后過濾器類中JS中沒有其他依賴項）：

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

Answer 2

碼

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

}）;

CSS

   .display
    {
     display:block;
   }

Answer 3

添加和刪​​除使用Java樣式的類。 而且您不需要!important在初始CSS上!important 。

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

看看我的JSFIDDLE

Answer 4

這是一種使用hover功能和show / hide功能的方法

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

 <script src="https://ajax.googleapis.com/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> 

Answer 5

試試這個toggleClass選項

 $("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.com/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> 

Answer 6

您可以使用hover功能並添加css來顯示和隱藏它

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

的jsfiddle

Answer 7

<a id="thumbnail" href="#"><img src="http://dummyimage.com/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; 
}