jqueryのは、多くのdivの（ワードプレス）

Question

朝フェローズと、動作しません。私は、ホバー/マウスオーバーイベントで私にテキストパネルをトリガーするjqueryスクリプトを持っています。

jqueryがうまくいかない理由はわかりませんが、トリガークラスの単純なテキストを追加するとスクリプトはうまく動作しますが、何らかの理由でimgや別のクラス要素でトリガーできません。

まず、私はCSSがクエリをブロックすると思ったが、CSSは見た目だけだったのだろうか？または私は間違っていますか？

jqueryをhtmlトグルボタンとして実行できるかどうかの2番目の質問です。私は、テキストをオーバーレイとして表示する必要はありません、それはすべてのものを下に移動する必要があります、私はトグル属性で、slideDown属性を置き換えようとしましたが動作しません。

多分WordPressの何かがトリガーをブロックするかもしれません。 誰かが私を助けてくれるといいですね。

平和 ジョン

jQuery(document).ready(function() { 
 
    jQuery(".info").hide(); 
 
    jQuery(".trigger").mouseout(function() { 
 
    jQuery(this).next(".info").slideUp(200); 
 
    }); 
 
    jQuery(".trigger").mouseover(function() { 
 
    jQuery(this).next(".info").slideDown(200); 
 
    }); 
 
});

.uk-grid-width-1-4 > * { 
 
    width: 25%; 
 
} 
 
.uk-panel { 
 

 
    display: block; 
 
    
 
    position: relative; 
 
} 
 

 
.uk-panel, 
 
.uk-panel:hover { 
 
    text-decoration: none; 
 
} 
 

 
.uk-panel:before, 
 
.uk-panel:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
.uk-panel:after { 
 
    clear: both; 
 
} 
 

 
.uk-panel > :not(.uk-panel-title):last-child { 
 
    margin-bottom: 0; 
 
} 
 
.uk-panel-teaser { 
 
    margin-bottom: 15px; 
 
} 
 
.uk-overlay { 
 
    /* 1 */ 
 
    display: inline-block; 
 
    /* 2 */ 
 
    position: relative; 
 
    /* 3 */ 
 
    max-width: 100%; 
 
    /* 4 */ 
 
    vertical-align: middle; 
 
    /* 5 */ 
 
    overflow: hidden; 
 
    /* 6 */ 
 
    -webkit-transform: translateZ(0); 
 
    /* 7 */ 
 
    margin: 0; 
 
} 
 
.uk-overlay-hover:not(:hover):not(.uk-hover) .uk-overlay-panel:not(.uk-ignore) { 
 
    opacity: 0; 
 
} 
 
.uk-overlay-active :not(.uk-active) > .uk-overlay-panel:not(.uk-ignore) { 
 
    opacity: 0; 
 
} 
 
.uk-position-cover { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.info { 
 
display:none; 
 
padding: 20px; 
 
background: #fff; 
 
position:relative; 
 
box-sizing: border-box; 
 
z-index:10; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wk-grid51f" class="uk-grid-width-1-4 " data-uk-grid="{gutter: ' 10',controls: '#wk-51f'}" style="position: relative; margin-left: -10px; height: 316px;"> 
 

 
    
 
    <div data-uk-filter="Gewerbe" data-grid-prepared="true" style="position: absolute; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; top: 0px; left: 0px; opacity: 1;"> 
 
    
 
<div class="uk-panel"> 
 

 
    <div class="uk-panel-teaser trigger"> 
 

 
     <figure class="uk-overlay uk-overlay-hover "> 
 

 
      <img src="223.jpg" alt="blabla" width="1875" height="1250"> 
 
      
 
      
 
      
 
                     <a class="uk-position-cover" href="#wk-351f" data-index="0" data-uk-modal=""></a> 
 
               
 
     </figure> 
 

 
    </div> 
 

 
    
 
     
 
       <div> 
 
<div class="info" style="display: none;"><p> <b> blabla </b> </p> 
 
<p> blabla </p> 
 

 
<p> <b> blabla</b> 
 
blabla 
 
</p></div> 
 
</div> 
 
     
 
    
 
</div> 
 
    </div> 
 

 
    
 
</div>

Answer 1

.info要素は、あなたが.closest()と.siblings()の使用でそれを変更する必要があり、セレクタの兄弟が、セレクタの親の兄弟要素ではないので、代わりに：

jQuery(document).ready(function() { 
    jQuery(".info").hide(); 
    jQuery(".trigger").mouseout(function() { 
    jQuery(this).closest('.uk-panel').siblings(".info").slideUp(200); 
    }); 
    jQuery(".trigger").mouseover(function() { 
    jQuery(this).closest('.uk-panel').siblings(".info").slideDown(200); 
    }); 
}); 

Answer 2

は答えを.info

jQuery(document).ready(function() { 
 
    jQuery(".info").hide(); 
 
    jQuery(".trigger").mouseout(function() { 
 
    jQuery(this).next(".info").slideUp(200); 
 
    }); 
 
    jQuery(".trigger").mouseover(function() { 
 
    jQuery(this).next(".info").slideDown(200); 
 
    }); 
 
});

.uk-grid-width-1-4 > * { 
 
    width: 25%; 
 
} 
 
.uk-panel { 
 
    display: block; 
 
    position: relative; 
 
} 
 
.uk-panel, 
 
.uk-panel:hover { 
 
    text-decoration: none; 
 
} 
 
.uk-panel:before, 
 
.uk-panel:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
.uk-panel:after { 
 
    clear: both; 
 
} 
 
.uk-panel >:not(.uk-panel-title):last-child { 
 
    margin-bottom: 0; 
 
} 
 
.uk-panel-teaser { 
 
    margin-bottom: 15px; 
 
} 
 
.uk-overlay { 
 
    /* 1 */ 
 
    display: inline-block; 
 
    /* 2 */ 
 
    position: relative; 
 
    /* 3 */ 
 
    max-width: 100%; 
 
    /* 4 */ 
 
    vertical-align: middle; 
 
    /* 5 */ 
 
    overflow: hidden; 
 
    /* 6 */ 
 
    -webkit-transform: translateZ(0); 
 
    /* 7 */ 
 
    margin: 0; 
 
} 
 
.uk-overlay-hover:not(:hover):not(.uk-hover) .uk-overlay-panel:not(.uk-ignore) { 
 
    opacity: 0; 
 
} 
 
.uk-overlay-active:not(.uk-active) > .uk-overlay-panel:not(.uk-ignore) { 
 
    opacity: 0; 
 
} 
 
.uk-position-cover { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.info { 
 
    display: none; 
 
    padding: 20px; 
 
    background: #fff; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    z-index: 10; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wk-grid51f" class="uk-grid-width-1-4 " data-uk-grid="{gutter: ' 10',controls: '#wk-51f'}" style="position: relative; margin-left: -10px; height: 316px;"> 
 

 

 
    <div data-uk-filter="Gewerbe" data-grid-prepared="true" style="position: absolute; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; top: 0px; left: 0px; opacity: 1;"> 
 

 
    <div class="uk-panel"> 
 

 
     <div class="uk-panel-teaser trigger"> 
 

 
     <figure class="uk-overlay uk-overlay-hover "> 
 

 
      <img src="223.jpg" alt="blabla" width="1875" height="1250"> 
 

 

 

 
      <a class="uk-position-cover" href="#wk-351f" data-index="0" data-uk-modal=""></a> 
 

 
     </figure> 
 

 
     </div> 
 

 

 

 

 
     <div class="info" style="display: none;"> 
 
     <p> <b> blabla </b> 
 
     </p> 
 
     <p>blabla</p> 
 

 
     <p> <b> blabla</b> 
 
      blabla 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
</div>