在鼠标上显示 在 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 未显示在声明的代码中。