Question

大家好，我是jQuery的新手，需要你的帮助。

我想在鼠标悬停时出现孙子/后代div。这段代码似乎没有用，所以我想知道出了什么问题。

这是HTML标记：

<div id='#content'>

   <div class="main-div">   /* ------- parent ---- */

      <div class="col1"> (Wordpress content goes in here </div>
      <div class="col2"> (featured-photo here in second column) </div> /* ----- child ---- */
      <div class="col3"> 
        <div class="photo-controls"> .. </div>   /* ----- grandchild ---- */
      </div>

   </div>
</div>

我有这个js代码：

var $content = $('#content');

$content.on('mouseenter', '.main-div', function() {
        $(this).find('.photo-controls').show();
    }
});

$content.on('mouseleave', '.main-div', function() {
        $(this).find('.photo-controls').hide();
    }
});

这是css：

.photo-controls {
display: none;
position: absolute;
}

我已经尝试过使用孩子，兄弟姐妹，但他们似乎没有接受后代div来悬停。

Answer 1

正如Billyonecan在评论中所说，你在元素id标记中不需要＃符号。

我对您的JS代码和标记做了一些更改。

修订标记：

<div id='content'>

  <div class="col1"> .. </div>
  <div class="col2"> .. </div> /* ----- child ---- */
  <div class="col3"> 
    <div class="photo-controls"> .. </div>   /* ----- grandchild ---- */
  </div>

修订js：

$( "#content" ).mouseenter(function(){
          $('#content .photo-controls').toggle(true);
 }).mouseleave(function(){
          $('#content .photo-controls').toggle(false);
 });

老实说，我不确定是什么

$masonryeman.on('mouseleave', '.thumb-holder', function() {
    $(this).find('.photo-controls').hide();
});

应该这样做。因为引用的var未在声明中的代码中显示。

在鼠标上显示在jquery中输入descendant / nested div

1 个答案: