JQuery не работает, со многими Div (WordPress)

jquery html css wordpress

57 просмотра

2 ответа

19 Репутация автора

Morning Fellows,

Я работаю над сайтом Wordpress. У меня есть скрипт jquery, который запускает текстовую панель с событием наведения / наведения мыши.

Я не знаю, почему jquery не работает, скрипт работает нормально, если я добавляю простой текст с классом триггера, но по какой-то причине я не могу вызвать его с помощью img или другого элемента класса.

Сначала я подумал, что css блокирует запрос, но css только для внешнего вида? или я не прав?

Второй вопрос: смогу ли я запустить jquery в качестве кнопки переключения html. Я не хочу, чтобы текст отображался как оверлей, он должен перемещать все ниже, я пытался заменить атрибут slideDown атрибутом toggle, но он не работает.

Может быть, что-то в 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>

Автор: Jonathan Janeta Источник Размещён: 07.07.2016 09:36

Ответы (2)


1 плюс

66066 Репутация автора

.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);
  });
});
Автор: Jai Размещён: 07.07.2016 09:41

0 плюса

29378 Репутация автора

Удалить div, который упаковывает .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>

Автор: madalinivascu Размещён: 07.07.2016 09:43
Вопросы из категории :
32x32