Morning Fellows，
我正在使用Wordpress网站。我有一个jquery脚本，它触发了一个带有悬停/鼠标悬停事件的文本面板。
我不知道为什么jquery不起作用，如果我用触发器类添加一个简单的文本，脚本工作正常，但由于某种原因我不能用img或其他类元素触发它。
首先我认为css会阻止查询，但css仅用于外观？或者我错了？
第二个问题是，如果我可以将jquery作为html切换按钮运行。我不希望文本显示为叠加层，它应该将所有内容向下移动，我尝试用toggle属性替换slideDown属性但它不起作用。
也许wordpress中的某些内容阻止了触发器， 如果有人能帮助我的话会很好！
和平 约翰
.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><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
for(i=1;i<=10;i++){
var id = Math.floor(Math.random() * 30) + 1;
$("#display_"+id).show();
}
});
</script>
<div id="display_1" style="display:none;">1</div>
<div id="display_2" style="display:none;">2</div>
<div id="display_3" style="display:none;">3</div>
<div id="display_4" style="display:none;">4</div>
<div id="display_5" style="display:none;">5</div>
<div id="display_6" style="display:none;">6</div>
<div id="display_7" style="display:none;">7</div>
<div id="display_8" style="display:none;">8</div>
<div id="display_9" style="display:none;">9</div>
<div id="display_10" style="display:none;">10</div>
<div id="display_11" style="display:none;">11</div>
<div id="display_12" style="display:none;">12</div>
<div id="display_13" style="display:none;">13</div>
<div id="display_14" style="display:none;">14</div>
<div id="display_15" style="display:none;">15</div>
<div id="display_16" style="display:none;">16</div>
<div id="display_17" style="display:none;">17</div>
<div id="display_18" style="display:none;">18</div>
<div id="display_19" style="display:none;">19</div>
<div id="display_20" style="display:none;">20</div>
<div id="display_21" style="display:none;">21</div>
<div id="display_22" style="display:none;">22</div>
<div id="display_23" style="display:none;">23</div>
<div id="display_24" style="display:none;">24</div>
<div id="display_25" style="display:none;">25</div>
<div id="display_26" style="display:none;">26</div>
<div id="display_27" style="display:none;">27</div>
<div id="display_28" style="display:none;">28</div>
<div id="display_29" style="display:none;">29</div>
<div id="display_30" style="display:none;">30</div>
答案 0 :(得分：1)
.info元素不是选择器的兄弟，而是选择器的父级兄弟元素，因此，您必须使用.closest()和{{}来更改它1}}代替：
.siblings()答案 1 :(得分：0)
删除包装.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>