使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>我在这里有一个显示行为的示例页面：
http://estorkdelivery.com/example/example2.html
将鼠标悬停在底部的图像上可查看显示在视口外部的悬停图像。
谢谢!
更新2/22/2012我测试了下面的答案#1，但它引入了新的问题，比如需要更改透明度，以及需要始终从图像的左上角显示悬停图像-这两个问题我认为没有办法使用脚本选项进行修改。有谁有其他建议或方法来修改答案#1中的脚本吗？此外，我应该补充我正在寻找的更多的最终结果是istockphoto.com上的图像悬停样式，其中图像始终显示在他们悬停在图像左侧或右侧的相同位置，而不是基于鼠标的位置，当您悬停在图像上。
回答 5
Stack Overflow用户
发布于 2012-02-25 10:42:15
我已经为你创建了一个定制的插件！
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
如果你喜欢它，我很乐意花一些时间在它上面，并根据你的需要对它进行调整！
Stack Overflow用户
发布于 2012-01-29 06:35:20
尝试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‘将用于显示带有hover事件的图像。
'.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>就这样!
Stack Overflow用户
发布于 2012-02-25 19:06:33
https://stackoverflow.com/questions/9049182
复制相似问题