javascript - Jquery 隐藏和显示在悬停时不起作用

Question

我在使用 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();
});

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