Question

我遇到了jquery hide / show（或者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();
});

Answer 1

删除$('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 */
});

<强> Fiddle

Jquery隐藏并显示无法处理悬停

1 个答案: