[英]Change one element on hover another
I've got following piece of html code: 我有以下一段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>
Plus the css: 加上CSS:
.post-filter {
display: none!important;
}
What I'm trying to achieve is to show .post-filter
div only when hovered #menu-item-993
. 我想要实现的是仅在
#menu-item-993
悬停时显示.post-filter
div。 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. 我试图将
+
或~
放在..:hover
和.post-filter
-没有成功。 What Im doing wrong? 我在做什么错?
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): 如果这不能覆盖!important,请尝试以下操作(假定后过滤器类中JS中没有其他依赖项):
$("#menu-item-993").mouseenter(function () {
$("div.header-menu + div").removeClass("post-filter");
}).mouseleave(function () {
$("div.header-menu + div").addClass("post-filter");
});
$("#menu-item993").mouseenter(function () {
$(".post-filter").addClass('dispaly')
}).mouseleave(function () {
$(".post-filter").removeClass('dispaly');
}); });
.display
{
display:block;
}
Add and remove the class of styling with Javascript. 添加和删除使用Java样式的类。 And you don't need
!important
on the initial css. 而且您不需要
!important
在初始CSS上!important
。
$("#menu-item-993").mouseenter(function(){
$(".post-filter").addClass("showit");
}).mouseleave(function(){
$(".post-filter").removeClass("showit");
});
Here is a way using hover
function and the show
/ hide
functions 这是一种使用
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>
Try this toggleClass option
试试这个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>
<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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.