在鼠标上显示在 jquery 中输入后代/嵌套 div

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 没有在声明的代码中显示。