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

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

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