个人中心
gpt4 book ai didi

jquery - 使用jquery在悬停时显示图像

转载 作者：行者123 更新时间：2023-11-28 10:40:19 25 4
gpt4 key购买 nike

我有一些链接，我想在将鼠标悬停在链接上时显示图像。我想实现类似的东西:http://www.bootsnipp.com/snippets/featured/bootstrap-lightbox

但我希望它不是点击，而是在超链接悬停时发生。以下是我尝试过的代码。谁能帮我改正。

代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>test</title>
 <link href="bootstrap.min.css" rel="stylesheet" />
  <script src="jquery-2.1.0.min.js"></script>
 <script src="bootstrap.min.js"></script>
 <style>
    #lightbox .modal-content {
display: inline-block;
text-align: center;   
}

#lightbox .close {
opacity: 1;
color: rgb(255, 255, 255);
background-color: rgb(25, 25, 25);
padding: 5px 8px;
border-radius: 30px;
border: 2px solid rgb(255, 255, 255);
position: absolute;
top: -15px;
right: -55px;   
z-index:1032;
}
  </style>
  </head>
  <body>
 <script>
      $(document).ready(function () {

        var $lightbox = $('#lightbox');

        $('[data-target="#lightbox"]').hover(function () {
            var $img = $(this).find('img'),
                src = $img.attr('src'),
                alt = $img.attr('alt'),
                css = {
                    'maxWidth': $(window).width() - 100,
                    'maxHeight': $(window).height() - 100
                };

            $lightbox.find('.close').addClass('hidden');
            $lightbox.find('img').attr('src', src);
            $lightbox.find('img').attr('alt', '');
            $lightbox.find('img').css(css);
        });

        $lightbox.on('shown.bs.modal', function (e) {
            var $img = $lightbox.find('img');

            $lightbox.find('.modal-dialog').css({ 'width': $img.width() });
            $lightbox.find('.close').removeClass('hidden');
        });
    });
</script>
<a href="#" data-toggle="modal" data-target="#lightbox">
                            Hover here<img src="editedpics/5_china.jpg" style="display:none" />
                        </a>

 <div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">x</button>
                    <div class="modal-content">
                        <div class="modal-body">
                            <img src="" alt="" />
                        </div>
                    </div>
                </div>
            </div>
</body>
</html>

最佳答案

我没有查看您的代码，但根据您的问题，请在此处查看类似内容:Trigger fancybox with hover instead of click?

你应该能够为你的调整它:)

关于jquery - 使用jquery在悬停时显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23164357/

25 4 0
文章推荐： javascript - 在 HTML 页面中使用 javascript 函数
文章推荐： javascript - 将按钮激活的图像滚动器制作成自动滚动器
文章推荐： swift - 将多行的 heightForRowAt indexPath 设置为 0
文章推荐： html - 仅使用 CSS 的链接和输入控件中的垂直居中文本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com