文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在鼠标悬停时显示缩略图？

问如何在鼠标悬停时显示缩略图？
EN

Stack Overflow用户

提问于 2019-01-31 04:41:17

回答 1查看 77关注 0票数 0

我需要你的帮助，因为我的一个项目卡住了。我会解释的：

我正在创建一个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>

你有什么想法吗？

谢谢你们!！

javascript

jquery

wordpress

post

themes

回答 1

Stack Overflow用户

发布于 2019-01-31 05:18:53

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54449191

复制

相似问题

问如何在鼠标悬停时显示缩略图？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在鼠标悬停时显示缩略图？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在鼠标悬停时显示缩略图？
EN