jquery - 在鼠标上显示在 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

As Billyonecan stated in his comment, you don't need # symbols in the element id markup.

I've made some changes to your JS code and markup.

Revised markup:

<div id='content'>

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

Revised js:

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

Honestly, I'm not sure what

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

is supposed to do. as the var referenced wasn't shown in the code on declaration.