javascript - 鼠标悬停时突出显示图像的某些部分

Question

我想创建一个页面，它基本上有一张黑白照片，比如 5 个人。现在，将鼠标悬停在每个人上时，我希望该人亮起并在其旁边显示一个信息对话框。

谁能告诉我该怎么做？

提前致谢。:)

Answer 1

要么使用图像映射，要么在每个人的顶部制作“不可见”的 div。两者都有其优点和缺点，但图像地图是专门为您需要的而创建的。

要“点亮它们”，您唯一的选择是用透明背景覆盖 .png 图像（在不可见 div 的 :hover 上），并切掉那个人，但编辑为“光”

Answer 2

html:

 <a href="#" class="highlightit"><img border="0" src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg"> 
   <span> something </span>
 </a>

CSS：

.highlightit img{
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
 }

.highlightit:hover img{
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
 }

.highlightit:hover span{
  display:block;
}


.highlightit span{
  font-size:20px;
  color:white;
  background:black;
  text-decoration:none;
  display:none;
  width:100%;
  padding:10px;
  position:relative;
  margin-top:-20px;
}

检查这个小提琴预览http://jsfiddle.net/wandarkaf/cNC5G/。

Answer 3

两种可能的方法：

1. CSS 精灵

   • 创建一个大图像，其中包含原始图像以及处于每种不同悬停状态的图像（可能垂直堆叠）。

   • 将图像放置为 DIV 大小的背景图像，以仅显示原始图像（或图形或其他）。

   • 绝对将 DIV 中的一些链接定位到您希望它们所在的位置（确保您的容器 DIV 相对定位）。

   • 在悬停您的一个链接时，调整图像的背景位置以显示正确的图像并显示包含您的文本对话的隐藏 DIV/SPAN/WHATEVER。

2. Javascript。

   • 与上面相同的方法，但使用单独的图像，这些图像在悬停/鼠标或其他任何东西上调用，然后再次调用隐藏的对话来显示。大量工具提示插件可用于此目的。