Javascript 将一个元素悬停在另一个元素上

我有以下一段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>

我试图实现的是仅当悬停

#menu-item-993

时才显示

.post filter

div。所以我在做：

#菜单项-993：悬停后过滤器{
显示：块！重要；
}

但这根本不起作用。我尝试将

+

或

~

放在

之间：悬停
和
之间。后过滤器
-未成功。我做错了什么？
这里有一个mouseover（mouseenter）函数：

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

如果这还没有覆盖的话！重要提示：请尝试以下操作（假设JS中没有其他依赖项位于post filter类上）：

代码
}))

Css
使用Javascript添加和删除样式类。而且你不需要
！重要信息
在初始css上

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

查看我的
您可以使用
悬停
功能和添加
css
来显示和隐藏它

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

这里有一种使用
悬停
功能和
显示
/
隐藏
功能的方法


$（'#menu-item-993'）。悬停（函数（）{
$（'.post filter'）.show（）；
}，函数（）{
$（'.post filter'）.hide（）；
});


X

Y

Z


..
试试这个toggleClass选项


$（“body”）。在（“mouseover mouseout”上，“#菜单项-993”，函数（）{
$（'.post filter'）.toggleClass（“显示隐藏”）；
});
.post过滤器{
显示：无！重要；
}
显示
{
显示：块！重要；
}
隐藏
{
显示：隐藏！重要；
}


X

Y

Z


文本

filename.jpg
#缩略图{
显示：块；
宽度：150px；
高度：150像素；
}
#缩略图：悬停+标题{
显示：块；
}
#标题{
显示：无；
颜色：#ffffff；
背景色：#000000；
文本对齐：居中；
宽度：130px；
填充：10px；
}
当菜单悬停时，您需要使用js在后期过滤器上切换类（或显示/隐藏）。这不能通过纯css来实现，因为没有父选择器（您需要实现您想要的功能）使用javascript来实现……菜单项993上的鼠标悬停调用添加display:block的函数；要使用div.post-filtertypo，应该是
menu-item-993
cool！一件小事-当我尝试悬停任何元素（出现在悬停后弹出的div上）时，它消失了。我尝试添加位置：相对和z指数：100，但它仍然消失了：(
   .display
    {
     display:block;
   }

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

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

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