使 CSS 悬停停留在视口内

Question

我有一个使用 CSS 设置的悬停解决方案。但是，悬停图像不尊重视口，因此最终显示在视口之外。我计划简单地创建新的类，根据设计中图像的位置指定偏移量，但由于我无法控制用户使用的分辨率，所以我认为应该有某种方法来强制悬停在视口。有谁知道我该如何做到这一点？

我有以下 CSS：

.thumbnail:hover {
    background-color: transparent;
    z-index: 50;
}

.thumbnail span { 
    position: absolute;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

.thumbnail span img { 
    border-width: 0;
    padding: 2px;
}

.thumbnail:hover span { 
    visibility: visible;
    top: 0;
    left: 70px; 
}

要将以下缩略图与悬停匹配：

<li>
    <a href="http://www.yahoo.com" class="img thumbnail">
        <img src="1_s.jpg" />
        <span><img src="1_b.jpg" /></span>
    </a>
</li>
<li>
    <a href="http://www.google.com" class="img thumbnail">
        <img src="2_s.jpg" />
        <span><img src="2_b.jpg" /></span>
    </a>
</li>

我这里有一个示例页面显示行为：

http ://estorkdelivery.com/example/example2.html

将鼠标悬停在底部的图像上可查看悬停图像显示在视口之外。

谢谢！

更新 2/22/2012 我测试了下面的答案#1，但它引入了新的问题，例如需要更改透明度以及需要让悬停图像始终从图像的左上角显示- 我发现这两个问题都无法使用脚本选项进行修改。有人有其他建议或修改答案#1中脚本的方法吗？另外，我应该添加我正在寻找的内容，因为更多的最终结果是 istockphoto.com 上图像的悬停样式，其中图像始终出现在它们悬停的图像左侧或右侧的同一位置，而不是基于您将鼠标悬停在图像上时鼠标的位置。

Answer 1

我为您创建了一个定制插件！

http://jsfiddle.net/adaz/tAECz/

嗯，这很基本，但我认为它满足你的标准。您可以通过两种方式激活它：

1）如果您不愿意为每个图像创建缩略图，您可以简单地像这样列出您的图像：

<ul id="istockWannabe">
    <li>
        <img src="imgURL" width="600" height="400" title="Description" />
    </li>
    <li>
        <img src="imgURL" width="600" height="400" title="Description" />
    </li>
...
</ul>

2）如果您确实想创建自己的缩略图，您的 html 应该如下所示 无论您选择哪种

<ul id="istockWannabe">
    <li>
        <span rel="largeImgURL"><img src="thumbURL" /><span class="iStockWannabe_description">Image description</span></span>
    </li>
...
</ul>

方式，您都需要在页面中包含 jQuery 1.7+ 以及我的插件。

您需要做的最后一件事是激活它，如果您要选择第一个选项，您可以在页面中包含以下代码：

<script type="text/javascript">
    $(document).ready(function() {
        $("#istockWannabe").istockWannabe();
    });
</script>

如果您要选择第二个选项，您需要覆盖默认设置，例如这：

<script type="text/javascript">
    $(document).ready(function() {
        $("#istockWannabe").istockWannabe({ createThumbs: false });
    });
</script>

这更像是一个原型，因此它的功能非常有限，但您可以设置一些选项，例如：
拇指最大宽度：100
拇指最大高度：100
工具提示宽度：200
工具提示高度：150
transitionSpeed: 100

如果您喜欢它，我很乐意花一些时间在上面并调整它以满足您的需求！

Answer 2

尝试 jQuery 工具提示：

这里是根据您的要求提供的示例：
http://jsfiddle.net/cadence96/3X2eZ/

文档
http://docs.jquery.com/Plugins/Tooltip
http://jquery.bassistance.de/tooltip/demo/

快速说明：
1) 在内加载 css 和脚本：

<link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>

2) 仍在 内放置执行脚本：

<script type="text/javascript">
            $(document).ready(function() {
                $(".your-div").tooltip({
                    track: true,
                    delay: 0,
                    showURL: false,
                    fade: 250,
                    bodyHandler: function() {
                        return $($(this).next().html());
                    },
                    showURL: false
                });
            });
        </script>

类“.my-div”将用于通过悬停事件显示图像。
“.my-div”的同级 div 必须包含隐藏元素，以便在悬停后可见。

<ul>
    <li>
            <div class="my-div">
                <!-- Here comes the image with the hover event -->
            </div>
            <div class="active-hover">
                <!-- Here comes all the hidden elements I want to display while hovering the PREVIOUS div --><br />
                <!-- .active-hover must be set with display:none -->
            </div>
    </li>
</ul>

仅此而已！

Answer 3

我开发了一个脚本，在js中你可以改变容器的宽度。

这是小提琴：
http://jsfiddle.net/cadence96/GgDqh/

已更新，现在可以在 FDDLE 中使用并且适应性更强。

Answer 4

更新：

• 演示：http:// so.lucafilosofi.com/make-css-hover-stay-within-viewport

查看源代码

注意：这没有考虑弹出窗口大于窗口的情况，在这在这种情况下，您不仅应该更改偏移位置，还必须调整弹出窗口的大小以适应窗口。

Answer 5

这有效。然而我只解决了 Y 轴的问题。对于水平偏移，它应该是相同的。 在此处查看其工作原理。
我将 top 设置为图像的一侧 * -1，如果图像不合适，这会将图像对齐到底部，将该值更改为您想要的值。图像非常大，但是这个脚本并不是万无一失的。您必须获得整个可见区域，以确保在重新定位它时不会在另一侧切掉它。

标记没有改变，我只是添加了 Jquery：

    $(document).ready(function(){

    $(".thumbnail > img").mouseenter(function(){

        var winSize = $(window).height();
        var winScrollTop = $(window).scrollTop();
        var linkOffset = $(this).offset().top - winScrollTop + 75; 
        // 75px is the height of the img. To get the offset().bottom . Get rid of the scroll too.
        var imgHover = $(this).next("span");
        var imgHoverHeight = parseInt(imgHover.children("img").attr("height"));
        var spaceDif = winSize-linkOffset;
        if(spaceDif < imgHoverHeight){
            imgHover.css("top", -imgHoverHeight+"px");
          //it doesn't have to be -imgHoverHeight. Tweak this value to get better results           
        }

    }); 

    $(".thumbnail > img").mouseout(function(){

        $("span").css("top", "0");

    });
});

希望它有帮助！

Answer 6

试试这个……看起来比较酷！

<html>
<head>
    <title>Hover Test</title>
    <style>
        li {margin-bottom: 100px;}
        .thumbnail{position: relative;z-index: 0;}
        .thumbnail:hover{background-color: transparent;z-index: 50;}
        .thumbnail div{ /*CSS for enlarged image*/position: absolute;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;}
        .thumbnail div img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}
        .thumbnail:hover div{ /*CSS for enlarged image on hover*/visibility: visible;top: 0;left: 70px; /*position where enlarged image should offset horizontally */}
    </style>
</head>
<body>
    <li>
        <a href="http://www.yahoo.com" class="img thumbnail">
            <img src="1_s.jpg">
            <div><img src="1_b.jpg"></div>
        </a>
    </li>
    <li>
        <a href="http://www.google.com" class="img thumbnail">
            <img src="2_s.jpg">
            <div><img src="2_b.jpg"></div>
        </a>
    </li>
    <li>
        <a href="http://www.apple.com" class="img thumbnail">
            <img src="3_s.jpg">
            <div><img src="3_b.jpg"></div>
        </a>
    </li>
    <li>
        <a href="http://www.babycenter.com" class="img thumbnail">
            <img src="4_s.jpg">
            <div><img src="4_b.jpg"></div>
        </a>
    </li>
    <li>
        <a href="http://www.food.com" class="img thumbnail">
            <img src="5_s.jpg">
            <div><img src="5_b.jpg"></div>
        </a>
    </li>       
</body>