Question

我公司网站上有10个国旗（VS 2010 / vb / asp.net4.0）。单击一个标记将在整个会话期间以该国家/地区的语言显示该网站。

我想，当客户在旗帜上盘旋时，该国家的迷你图片悬停在旗帜的右上方。因此，当他们点击德国国旗时，德国的迷你地图会出现在右上方 - 我会对它进行z索引，使其超过它上方的表格行 - 并且除了图像，它还会说“Deutch”或“以德语查看此网站”（当然是德语）。

                   **Images of countries here when hovering**
       Flag1  Flag2  Flag3  Flag4  Flag5  Flag6  Flag7  Flag8

对于像我这样不擅长CSS的人来说，这是可能的，如果是这样的话，我该如何去做呢？任何指导将不胜感激！

Answer 1

假设您使用的是列表

<a class="flagbutton">
  <img src="/flag1"/>
  <img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
  <img src="/flag1"/>
  <img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
  <img src="/flag1"/>
  <img class="map" src="/flag1map"/>
</a>

.map{
display:none;
}
a.flagbutton:hover .map{
display:block;
}

你可以添加额外的css来在.map位中进行定位！

Answer 2

使用CSS非常简单，完全不需要Javascript。有很多细节，但基本模式是将您的图像放在与旗帜相同的元素中。我们称之为.flag。将国家/地区图片设置为display:none;。然后，将.flag:hover img设置为display:block;。这将使图像仅在悬停在旗帜上时出现。

您必须将flag元素的位置设置为relative，并将country image的位置设置为absolute。这样您就可以将图像的顶部和右侧位置设置到您想要的位置。

Answer 3

我建议使用jquery，因为这样可以让你在悬停时显示图像/文本。 CSS将用于定位和格式化图像或文本。

这是一个很好的参考资料。

http://api.jquery.com/mouseover/

Answer 4

你可以用CSS做，但如果你需要动画，你需要JS。这是没有anims的那个的代码。

<强> HTML

</ul>
   <li class="item">
      <img src="flag.jpg" />
      <img src="pic.jpg" class="pic" />
   </li>
   <li class="item">
      <img src="flag.jpg" />
      <img src="pic.jpg" class="pic" />
   </li>
   <li class="item">
      <img src="flag.jpg" />
      <img src="pic.jpg" class="pic" />
   </li>
.
.
.
</ul>

<强> CSS

.item {
   position:relative; /*Needed for pos:absolute below*/
}
.pic {
   display:none;
}
.item:hover pic {
   display:block;
   position:absolute;
   top:-20px;
}

Answer 5

我为你创造了一个小提琴 - http://jsfiddle.net/UHZzJ/

您可以将列表替换为<div>以及您的结构要求。显示“以德语查看此网站”的行需要位于链接旁边的子区域中，并且绝对定位到父级<div>。

忘记添加，li:hover在IE6中不起作用。仅允许a:hover。在这种情况下，您必须将div放在<a>内（设置display:block）。如果您对JQuery持开放态度，那么有更优雅的解决方案 - http://flowplayer.org/tools/tooltip/index.html，http://craigsworks.com/projects/qtip/

将鼠标悬停在图像上时需要CSS效果，以便在其上方显示另一个图像和/或文本

5 个答案: