jquery 不起作用，有很多 div (Wordpress)

Question

早安同学们，

我正在开发一个 Wordpress 网站。我有一个 jquery 脚本，它触发我一个带有悬停/鼠标悬停事件的文本面板。

我不知道为什么 jquery 不起作用，如果我用触发器类添加一个简单的文本，脚本可以正常工作，但由于某种原因，我不能用 img 或其他类元素触发它。

首先我认为 css 会阻止查询，但 css 仅用于外观？还是我错了？

第二个问题是，如果我可以让 jquery 作为 html 切换按钮运行。我不希望文本显示为覆盖，它应该将所有内容移到下方，我尝试用切换属性替换 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的div

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>