我已经获得了以下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;
}
我想要实现的目的是仅在悬停.post-filter
时显示#menu-item-993
div。所以我正在做:
#menu-item-993:hover .post-filter {
display:block!important;
}
但这不起作用。我试图将+
或~
放在..:hover
和.post-filter
之间 - 但没有成功。我做错了什么?
答案 0 :(得分:2)
这是一个鼠标悬停(mouseenter)功能:
$("#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");
});
答案 1 :(得分:1)
System.IO.DirectoryInfo di = new DirectoryInfo(a);
foreach (DirectoryInfo dir in di.GetDirectories().Where( x=> x.Name != "Games"))
{
dir.Delete(true);
}
});
$("#menu-item993").mouseenter(function () {
$(".post-filter").addClass('dispaly')
}).mouseleave(function () {
$(".post-filter").removeClass('dispaly');
答案 2 :(得分:1)
使用Javascript添加和删除样式类。你不需要!important
在最初的CSS上。
$("#menu-item-993").mouseenter(function(){
$(".post-filter").addClass("showit");
}).mouseleave(function(){
$(".post-filter").removeClass("showit");
});
查看我的 JSFIDDLE
答案 3 :(得分:1)
以下是使用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>
答案 4 :(得分:1)
试试这个toggleClass选项
$("body").on("mouseover mouseout", '#menu-item-993', function(){
$('.post-filter').toggleClass("show hide");
});
&#13;
.post-filter {
display: none!important;
}
.show
{
display: block!important;
}
.hide
{
display: hide!important;
}
&#13;
<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>
&#13;
答案 5 :(得分:0)
您可以使用hover
功能&amp;添加css
以显示和隐藏它
$("#menu-item-993").hover(function(){
$(".post-filter").css('display','block')
},function(){
$(".post-filter").css('display','none')
})
答案 6 :(得分:0)
<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;
}