我在使用 jquery 隐藏/显示(或者 display:none/block
)时遇到了问题 我想隐藏支持按钮,但当将鼠标移到它上面时它总是只闪烁。你能帮助我吗?这是 jsfiddle和代码示例:
HTML
<div class="photo">
<div class="something"></div>
<div class="voting">
<span class="vote">Support</span>
</div>
</div>
CSS
.photo {
position: relative;
width: 270px;
height 230px:
float: left;
overflow: hidden;
cursor: pointer;
}
.something {
width: 270px;
height: 230px;
background-color: #dddddd;
}
.voting {
width: 100%;
height: 100%;
position: absolute;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.17) 50%, rgba(0,0,0,0.4) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(1%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0.17)), color-stop(100%,rgba(0,0,0,0.4)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.17) 50%,rgba(0,0,0,0.4) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.17) 50%,rgba(0,0,0,0.4) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.17) 50%,rgba(0,0,0,0.4) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.17) 50%,rgba(0,0,0,0.4) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 );
text-align: center;
}
.voting .vote {
display: inline-block;
margin-top: 66%;
text-transform: uppercase;
font-size: 18px;
color: #fff;
border: 1px solid #fff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 5px 14px;
font-family: 'uni_sans_bold_rgdregular', Tahoma, sans-serif;
}
和JS
$(".photo").hover(function() {
$(this).find(".voting").css("top", "0px");
}, function() {
$(this).find(".voting").css("top", "");
});
$(".vote").hover(function() {
$(this).hide();
}, function() {
$(this).show();
});
最佳答案
删除 $('vote').hover(function(){...})
中的第二个函数并添加以下代码行 $('.vote')。 show();
在你的$(".photo").hover(function(){...})
中。 (悬停方形元素时再次显示)
所以你的代码应该是这样的-
$(".photo").hover(function () {
$('.vote').show(); /* Shows the .vote button again */
$(this).find(".voting").css("top", "0px");
}, function () {
$(this).find(".voting").css("top", "");
});
$(".vote").hover(function () {
$(this).hide(); /* Hides the .vote button on hover */
});
关于javascript - Jquery 隐藏和显示在悬停时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32412451/