Question

我在这个标记中有一个href图像。

<div class="imgdiv">
   <a class="imga" href="http://destination.com">
      <img src="http://image.com/image.jpg" width="100" height="100">
   </a>
</div>

当我将鼠标悬停在它上方时，我想在右上角显示另一张图片。这可以用css吗？或者我需要javascript吗？

我的CSS看起来像这样，但它仍然不起作用

a.imga:hover {
   background-image: url('over.png');
   background-position: top;
   z-index:3;
}

Answer 1

**Here is the solution you can try**

<div class="imgdiv">
       <a class="imga" href="http://destination.com">
          <img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" width="100" height="100">
       </a>
</div>

Answer 2

使用可以使用CSS，但不使用img标签而是使用带有背景图像的DIV

<div id="image"></div>

CSS样式

        #image{
            width: 100px; //Image height
            height: 100px; //Image width
            background: url('') 0 0 no-repeat; //Give your image path here
        }

        #image:hover{
            background: url('') 0 0 no-repeat; 
        }

Answer 3

您可以在div上使用:hover pseduo选择器，其中imgdiv类适当地设置background-position以显示在右上角。当然，您应该首先将background-image应用于div。

请注意:hover在IE6中不适用于除链接之外的任何内容。但是，您可以使用javascript / jquery来克服此限制。

Answer 4

尝试使用css-tricks.com上的CSS Sprites check out this screen-cast了解如何使用它们。

翻转效果，显示另一个图像

4 个答案: