Question

我有一些链接，我希望在我悬停在链接上时显示图像。我想实现与此类似的东西：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>

Answer 1

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

你应该可以为你调整它：）

使用jquery在悬停时显示图像

1 个答案: