Question

我认为这可以完全解决问题，但是我必须缺少一些东西。

我在div中嵌套了// Create new object to watch different types of objects var objectToBeWatch = { number1: number1, number2: number2, myArray: myArray }; $scope.$watch( function () { return objectToBeWatch; }, callback, true);的内容，我正在尝试使该跨度在悬停时显示（并在鼠标移开时隐藏）。

我认为只需执行span hover`函数即可，但是一定要缺少一些东西。

这就是我所拥有的：

HTML：

$(this).find('.name-of-span') inside of a

JS：

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

我认为应该有效，但是，我可能又缺少了一些东西。

我也尝试使用带有相邻兄弟选择器的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>

Answer 2

这有效。首先，将要显示的元素必须为'display：none'。

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

.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>
    
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

也可用children()代替find()

Answer 3

隐藏所有链接，然后显示所选链接。

$('.parent-item').hover(function() {
    //hide all the link before displaying the selected one. 
    $('.meta--reveal').hide();
    //displays the selected  item
    $(this).find('.meta--reveal').show();
  });

Answer 4

使用jQuery添加和删除类以切换显示，并与'.children'一起进行目标选择

$(document).ready(function() {

$(".hover").mouseover(function() {
    $(this).children('.target').removeClass("hide").addClass("reveal");
});

$(".hover").mouseleave(function() {
    $(this).children('.target').removeClass("reveal").addClass("hide");
});

});

.hide {
  display: none;
}

.reveal {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="hover">
  <h3>title 01</h3>
  <div class="target hide">
  <span class="metaReveal"><a class="btn" href="#">Link</a></span>
</div>
</div>  



<div class="hover">
  <h3>title 02</h3>
<div class="target hide">
  <span class="metaReveal"><a class="btn" href="#">Link</a></span>
</div>
</div>

将鼠标悬停在div上以显示jQuery的嵌套范围

4 个答案: