Question

我需要您的帮助，因为我被困在我的一个项目中。我会解释：

我正在创建一个WordPress主题，我想要一个包含我所有帖子的页面。 Check this image to see what i actually have。每个帖子都有一个缩略图，我希望与该帖子相对应的缩略图始终隐藏，并且仅在我将鼠标悬停时才显示。 Post1上的MouseOver =显示Post1的缩略图。 Post2上的MouseOver =显示Post2的缩略图。

您可以在此链接上看到我想要的：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>

你有什么想法吗？

谢谢大家！

Answer 1

您始终可以使用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>

如何通过鼠标悬停显示缩略图？

1 个答案: