Question

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

有人可以告诉我该怎么做吗？

提前致谢。：）

Answer 1

使用image map或在每个人的顶部制作“隐形”div。两者都有他们的专业和缺点，但是专门为您需要创建了一个图像地图。

要“点亮它们”，你唯一的选择就是覆盖一个.png图像（在：隐藏的div上悬停），透明背景与该人的剪切，但编辑为“光”

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

两种可能的方法：

CSS Sprites
- 创建一个大图像，其中包含原始图像以及每个图像的不同悬停状态（可能垂直堆叠）。
- 将图像作为DIV的背景图像放置，以显示原始图像（或图或其他）。
- 将DIV中的某些链接放置到您想要的位置（确保您的容器DIV位于相对位置）。
- 在悬停其中一个链接时，调整图像的背景位置以显示正确的图像，并显示包含文本对话的隐藏DIV / SPAN / WHATEVER。
的Javascript。
- 与上面相同的方法，但使用在悬停/鼠标或其他任何时候调用的单独图像，然后再次调用隐藏的对话框来显示。大量的工具提示插件可用于此目的。

鼠标悬停时突出显示部分图像

3 个答案: