我如何给一个.gif高度和宽度时插入onMouseOver

How do I give a .gif height and width when inserted with onMouseOver

本文关键字：高度 onMouseOver 插入 gif 一个      更新时间：2023-09-26

我有一个网页，有jpeg切换到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">

我给它一个service images类所以我可以应用这个样式

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

类工作时，它只是一个正常的图像。然而，现在它是一个rollOver图像，类不应用，图像默认为其正常大小，无论是gif还是jpeg。

可以在这里看到一个生动的例子

我该如何解决这个问题?

实际上，您不需要JavaScript来完成此操作。你只能使用纯CSS。

JSFiddle 

<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");    
}

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

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

但是，您可能希望改变使用CSS的方法。然后，您可以使用:hover类，而不是乱搞鼠标处理程序。例子。

#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;
}
相关文章：