只显示/隐藏一项javascript

Show/Hide javascript only one item

本文关键字：一项 javascript 显示 隐藏      更新时间：2023-09-26

我在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

像这样尝试

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

JSFIDDLE

相关文章：