僅顯示/隱藏javascript一項

Question

我在wordpress上創建了一個博客，並且必須發布動態帖子。 我做的

<div class="box">
    <span class="hide">Hide</span>
<span class="share" style="display:none">Show</span>
</div>
<div class="box">
    <span class="hide">Hide</span>
<span class="share" style="display:none">Show</span>
</div>
<div class="box">
    <span class="hide">Hide</span>
<span class="share" style="display:none">Show</span>
</div>
<div class="box">
    <span class="hide">Hide</span>
<span class="share" style="display:none">Show</span>
</div>
<div class="box">
    <span class="hide">Hide</span>
<span class="share" style="display:none">Show</span>
</div>
<div class="box">
    <span class="hide">Hide</span>
<span class="share" style="display:none">Show</span>
</div>

<scritp>
$( ".box" ).hover(

    function() {
      $(".hide").hide();
      $(".share").show();
}, function() {
      $(".hide").show();
      $(".share").hide();
});

</script>
.hide, .share {
    display:block;
    background-color: #A85BA5;
    padding: 30px;
    margin-bottom: 30px;
    color: #fff;
    text-align: center;
}

這是一個不起作用的示例http://jsfiddle.net/s59bu5xn/8/ ，我只希望在顯示時 隱藏一項更改。 此博客首頁上的所有項目均不全局。

最好的問候，M

Answer 1

這樣嘗試

$( ".box" ).hover(

    function() {
       $(this).find(".hide").hide();
      $(this).find(".share").show();
}, function() {
      $(this).find(".hide").show();
      $(this).find(".share").hide();
});

JSFIDDLE