Question

我有一个网页，当你将鼠标悬停在它们上面时，它会切换到gif。我使用此代码

执行此操作

<img src="images/e911_icon_vi_site_2014_white.jpg" onmouseover="this.src = 'images/e911_icon_vi_site_2014_white.gif'" onmouseout="    this.src = 'images/e911_icon_vi_site_2014_white.jpg'" class="servicesimages">

我给了它一类服务图像，所以我可以应用这种风格

.servicesImages{
    height:300px;
    width:412px;

}

该课程只是一张普通的图片。但是，现在它的rollOver图像，该类不适用，并且图像默认为正常大小，对于gif和jpeg。

可以看到一个实例：HERE

我该如何解决这个问题？

Answer 1

事实上，你不需要JavaScript来做到这一点。您只能使用纯CSS。

JSFiddle

<强> HTML

<div class="imgif"></div>

<强> CSS

.imgif {
    height: 400px;
    width: 400px;
    background-position: center;
    border-radius:50%;

    background-image: url("http://placekitten.com/400/400");
}

.imgif:hover {
     background-image: url("http://i.imgur.com/YzGK6hf.jpg");    
}

Answer 2

您可以在onmouseover处理程序中设置高度和宽度，如下所示：

onmouseover="this.src = 'images/e911_icon_vi_site_2014_white.gif'; this.style.height = '50px';"

但是，您可能希望更改使用CSS的方法。然后你可以使用：hover类而不是搞乱鼠标处理程序。 example

#Service1 {
    height: 300px;
    width: 300px;
    background: url('http://upload.wikimedia.org/wikipedia/commons/9/9a/Avenger__Westphalian_horse.jpg');
    background-size: 300px 300px;
}

#Service1:hover {
    height: 300px;
    width: 300px;
    background: url('http://www.canadianpetconnection.com/wp-content/uploads/2014/02/horse-OSPCA.jpg');
    background-size: 300px 300px;
}

使用onMouseOver插入时，如何提供.gif高度和宽度

2 个答案: