1

こんにちは皆さん、私は 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を拾ってホバーしていないようです。

4

1 に答える 1

0

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.

于 2013-10-11T14:38:39.100 に答える