Question

<div>
  <a href="#"><img src="images/Informasjon_button.png" width="120px" height="120px" /></a>
</div>
<div>
  <a href="#"><img src="images/Mail_button.png" width="120px" height="120px" /></a>
</div>
<div>
  <a href="#"><img src="images/Facebook_button.png" width="120px" height="120px" /></a>
</div>
<div>
  <a href="#"><img src="images/TLF_button.png" width="120px" height="120px" /></a>
</div>
<div>
  <a href="#"><img src="images/Portfolio_button.png" width="120px" height="120px" /></a>
</div>
</div>

我将鼠标悬停在当前图像上时需要显示另一张图像。

Answer 1

给你的div一个id＆gt;

类似的东西：

HTML：

<div id="image1"> <a href="#"> <img src="images/Informasjon_button.png" width="120px" height="120px" /></a><span class="overlay"></span></div>

的CSS：

.image1:hover .overlay {
  position:absolute;
  width: 48px;
  height: 48px;
  z-index: 100;
  background: transparent url('image2.png') no-repeat;
  cursor: pointer;
}

Answer 2

<a href="#">
    <div class="one"></div> 
</a>
<a href="#">
    <div class="two"></div>  
 </a>

添加样式

<style type="text/css">
    .one{
       width: 100px;
       height: 100px;
       /*background: url('icn.png') no-repeat;*/
       background-color: #0080FF;
    }
    .two{
       width: 100px;
       height: 100px;
       /*background: url('icn.png') no-repeat;*/
       background-color: #8000FF;
    }
    .one:before{
      content: '';
      width: 100px;
      height: 100px; 
      /*background: url('icn.png') no-repeat;*/
      background-color: #008040;
      position: absolute;
    }
    .two:before{
       content: '';
      width: 100px;
      height: 100px; 
      /*background: url('icn.png') no-repeat;*/
      background-color: #FF0080;
      position: absolute;
    }
    .one:hover:before, .two:hover:before{
      width: 0px;
      -webkit-animation: animation .2s 1 linear;
    }
       @-webkit-keyframes animation{
       from{width: 100px}
       to{width: 0px;}
    }

</style>

Answer 3

如果你想制作这些按钮图像。我建议使用 css sprite 技术。
基本上，您将使用悬停来更改图像本身。
这是一个更好地理解http://css-tricks.com/css-sprites/

的链接

再见。

* 如果解决方案请投票。

悬停时图像显示在图像上

3 个答案: