javascript - 将鼠标悬停在 div 上以使用 jQuery 显示嵌套跨度

Question

我认为这会完全有效，但我一定遗漏了一些东西。

我有一个嵌套的 span div 中的内容，我试图让该跨度在悬停时显示(并在鼠标移出时隐藏)。

我以为只要做一个 $(this).find('.name-of-span') inside of a hover` 函数可以做到这一点，但必须缺少一些东西。

这是我的:

HTML:

<div class="parent-item">
    <h3>title 01</h3>
        <span class="meta--reveal">
          <a class="btn" href="#">Link</a>
        </span>
</div>

<div class="parent-item">
        <h3>title 02</h3>
            <span class="meta--reveal">
              <a class="btn" href="#">Link</a>
            </span>
    </div>

JS:

  $('.parent-item').hover(function() {
    $(this).find('.meta--reveal').show();
  });

我认为应该有效，但同样，我可能遗漏了一些东西。

我还尝试使用带有相邻同级选择器的 CSS 来做到这一点，但这也不起作用。

Answer 1

您可以构造一个 CSS 规则，仅在父元素未悬停时才隐藏嵌套元素。

.parent-item:not(:hover) .meta--reveal {
  display: none;
}

<div class="parent-item">
  <h3>title 01</h3>
  <span class="meta--reveal">
    <a class="btn" href="#">Link</a>
  </span>
</div>

<div class="parent-item">
  <h3>title 02</h3>
  <span class="meta--reveal">
    <a class="btn" href="#">Link</a>
  </span>
</div>

否则，您现有的逻辑确实有效。您只是错过了恢复显示的第二种方法。

  $('.parent-item').hover(function() {
    $(this).find('.meta--reveal').show();
  }, function(){
    $(this).find('.meta--reveal').hide();
  });

.parent-item .meta--reveal {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-item">
  <h3>title 01</h3>
  <span class="meta--reveal">
    <a class="btn" href="#">Link</a>
  </span>
</div>

<div class="parent-item">
  <h3>title 02</h3>
  <span class="meta--reveal">
    <a class="btn" href="#">Link</a>
  </span>
</div>