Question

<img src="images/home.png" onmouseover="this.src=image1.src;" onmouseout="this.src=image0.src;" id="imgHome">

我是否可以将CSS转换应用于这两个图像，因此它不会立即显示。

我正在考虑在没有这条线的情况下这样做而只是制作2张单独的图像，但我更喜欢这种方式。

Answer 1

所以你想用一个img标签来做。使用background css属性可以实现它。

HTML：

<img id="image1">

CSS：

#image1
{
    background: url("http://css3.bradshawenterprises.com/images/Turtle.jpg");
}

#image1:hover
{
    background: url("http://css3.bradshawenterprises.com/images/Rainbow%20Worm.jpg");
}

img
{
    height: 250px;
    width: 500px;
    -webkit-transition: background-image 1s ease-in-out;
}

JSFiddle示例：Link to sample

Answer 2

转换仅用于更改CSS属性。你正在做的是改变图像的路径，这样就不会有过渡。

您可以使用jQuery进行转换（jQ有一些简单的动画，或者你可以使用一些更高级的库。）

如果你想使用CSS，那么你可以尝试将2张图像放在另一张图片上（使用绝对定位）。然后在悬停时将底部的不透明度从1更改为0，将顶部的不透明度从0更改为1.如果将过渡应用于不透明度，则应平滑过渡。

<style>
    .img{position:relative;}
    .top{position:absolute;top:0;left:0;opacity:0;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
      -transition: opacity 1s ease-in-out;
    }
    .bottom{opacity:1;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
      -transition: opacity 1s ease-in-out;
     }
    .top:hover{opacity:1;}
    .bottom:hover{opacity:0;}
</style>
<div class="img">
    <img class="bottom" src="http://placekitten.com/200/300?image=15">
    <img class="top" src="http://placekitten.com/200/300?image=16">
</div>

示例：http://jsfiddle.net/5kyBX/

使用this.src = image1.src进行转换;在html上的onmouseover

2 个答案: