JQuery скрыть и показать не работает на зависании

Question

У меня проблема с jquery hide/show (или, альтернативно, display:none/block) Я хочу скрыть кнопку Support, но она всегда мигает только при перемещении мыши над ней. Вы можете мне помочь? Вот 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