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

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

谢谢！

2012年2月22日更新我测试了下面的答案＃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>

这更像是原型，所以它在功能方面非常有限，但你可以设置一些选项，如：
thumbMaxWidth：100 thumbMaxHeight：100 tooltipWidth：200 tooltipHeight：150 transitionSpeed：100

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

Answer 2

尝试jQuery工具提示：

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

<强> DOCS
http://docs.jquery.com/Plugins/Tooltip
http://jquery.bassistance.de/tooltip/demo/

快速说明：
1）在＆lt; head＆gt;内加载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）仍然在＆lt; head＆gt;内放置执行脚本：

<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

更新：

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

查看源代码

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

Answer 4

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

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

更新，现在在FIDDLE中工作并且更加适应。

Answer 5

这很有效。然而，我只针对Y轴解决了这个问题。对于水平偏移，它应该是相同的。 See how it works here。我将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>

使CSS悬停在视口内

6 个答案: