使CSS悬停在视口中

我有一个与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>

我在这里有一个示例页面，显示了以下行为：

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

谢谢

---

更新2012年2月22日我测试了下面的答案#1，但它引入了一些新问题，如需要更改透明度和需要始终从图像左上角显示悬停图像-这两个问题我认为无法使用脚本选项进行修改。有人有其他建议或方法来修改答案1中的脚本吗？此外，我还应该添加我想要的内容，因为更多的最终结果是istockphoto.com上的图像悬停样式，其中图像始终显示在其悬停图像左侧或右侧的同一位置，而不是基于鼠标悬停在图像上时的位置。

尝试jQuery工具提示：

根据您的要求，这里有一个示例：

文档

快速说明：
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>

$（文档）.ready（函数（）{
$（“.your div”）。工具提示({
轨迹：对，
延迟：0，
showURL:false，
衰减：250，
bodyHandler:function（）{
返回$（$（this.next（）.html（））；
},
showURL:false
});
});

类“.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>

---

就这些

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

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

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>

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

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

...

2） 如果您真的想创建自己的缩略图，您的html应该如下所示：

<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>

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

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

图像描述

...

无论您选择哪种方式，您都需要在页面中包括jQuery 1.7+和我的插件

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

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

$（文档）.ready（函数（）{
$（“#istockWannabe”）.istockWannabe（）；
});

如果选择第二个选项，则需要覆盖以下默认设置：

<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>

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

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

$（文档）.ready（函数（）{
$（“#istockWannabe”）.istockWannabe（{createThumbs:false}）；
});

这更像是一个原型，因此在功能方面非常有限，但您可以设置一些选项，如：
拇指最大宽度：100 拇指最大高度：100 工具提示宽度：200 八：150 过渡速度：100

---

如果你喜欢它，我很乐意花一些时间在它上面，并调整它以适应你的需要

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

这是小提琴：

---

已更新，现在可在小提琴中使用，适应性更强。

已更新：

• 演示：

看看源代码

---

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

这是可行的。然而，我只解决了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");

    });
});

$（文档）.ready（函数（）{
$（“.thumbnail>img”）.mouseenter（函数（）{
var winSize=$（window.height（）；
var winScrollTop=$（窗口）.scrollTop（）；
var linkOffset=$（this）.offset（）.top-winScrollTop+75；
//75px是img的高度。要获得偏移量（）.bottom。也要去掉滚动条。
var imgHover=$（此）.next（“span”）；
var imgHoverHeight=parseInt（imgHover.children（“img”）.attr（“height”）；
var spaceDif=winSize linkOffset；
if（空间DIFimg”）.mouseout（函数（）{
$（“span”）.css（“顶部”、“0”）；
});
});

---

希望有帮助

试试这个。。。看起来比较酷

<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>