Как отобразить миниатюру при наведении курсора мыши? - PullRequest
Новая
       6

Как отобразить миниатюру при наведении курсора мыши?

0 голосов
/ 30 января 2019

Мне нужна ваша помощь, потому что я застрял на одном из моих проектов.Я объясню:

Я создаю тему WordPress, и я хочу страницу, содержащую все мои сообщения. Проверьте это изображение, чтобы увидеть, что у меня на самом деле .У каждого поста есть миниатюра, и я хочу, чтобы миниатюра, соответствующая посту, постоянно скрывалась и появлялась только при наведении мыши.MouseOver on Post1 = Отображение миниатюры сообщения1.MouseOver on Post2 = Отображение миниатюры поста 2.

Вы можете увидеть, что я хочу по этой ссылке: http://nicholascope.com/sets

Так, на самом деле, у меня есть это, но оно не работает 

jQuery(document).ready(function($) {
            $('h3[id^="lienImage"]').each(function(index){
                $(this).mouseover(function(){
                    $('div[class^="absolute"]').show();
                });
            })
<div class="container-fluid text-light position-relative">
    {% for post in posts  %}
        <div class={{ "absolute" ~ loop.index }}  >
            <img src="{{ post.thumbnail.src }}"  alt="">
        </div>
        <div class="row">
            <div class="offset-5 col-3">
                <a href="">
                    <h3 class="lienImage" id={{"lienImage" ~ loop.index }}>
                      {{post.title }}
                    </h3>
                </a>
            </div>
            <div class="col-4 ">
                <span class="lienImage">
                    {{ post.meta('clients') }}
                </span>
            </div>
        </div>
    {% endfor %}
</div>

У вас есть какие-нибудь идеи?

Спасибо, ребята !!

1 Ответ

0 голосов
/ 31 января 2019

Вы всегда можете использовать jquery и динамические селекторы классов, чтобы создать одну функцию, которая могла бы показывать / скрывать каждый раздел вашего сайта, находя самое близкое скрытое изображение по сравнению с каждым p или div.Смотрите пример ниже. 

 $(document).ready(function(){
   $('p').mouseover(function(){
        //Find sibling image to show in tooltip
        $img = $(this).closest('div').find('.thumbImage');
        // Put logic on show
        $img.fadeIn('slow');
   }).mouseout(function(){
        // Put logic on hide
        $img.fadeOut('slow');
   });
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
  <div>
    <p>Sample text</p>
    <img class="thumbImage" style="display:none" src="sample.png" />
  </div>
   <div>
    <p>Sample text 2</p>
    <img class="thumbImage" style="display:none" src="sample.png" />
  </div>
  <div>
    <p>Sample text 3</p>
    <img class="thumbImage" style="display:none" src="sample.png" />
  </div>
  </body> 
 </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...