Question

我想将鼠标悬停在div id-“RollOver1”上，并能够将背景更改为与主要图像不同的图像。只粘贴用于翻转div的HTML使用jscript，所以有没有HTML或....？

<div id="RollOver1" style="position:absolute;overflow:hidden;left:152px;top:397px;width:183px;height:183px;z-index:4">
<a href="./car.html">
<img class="hover" alt="" src="images/Enter_02.jpg" style="left: 0px; top: 0px; width: 183px; height: 183px; display: block;">
<span style="display: none;"><img alt="" src="images/index_01.jpg" style="left:0px;top:0px;width:183px;height:183px"></span>
</a>
</div>

Answer 1

您可以使用以下代码执行此操作：

#RollOver1 {
   background:url(INITIAL_BACKGROUND);//here use the url of the background you want when is NOT on hover
}
#RollOver1:hover {
   background:url(BACKGROUND_ON_HOVER);//here use the url of the bg you want when is on hover
}

Answer 2

您可以使用:hover伪类：

#RollOver1 {
   background: url('img1.png');
}

#RollOver1:hover {
   background: url('img2.png');
}

但你通常会看到＆＃34; glich＆＃34;在图像变化之间，因为第二张图像需要一些时间来加载为避免这种情况，请使用图像精灵。将两个图像（正常和悬停）放到单个图像上，然后使用css background-position

#RollOver1 {
    background: url('sprite.png') no-repeat 0 0;
}

#RollOver1:hover {
     background-position: -80px -90px;
}

加载小图像（如按钮，图标等）将是更有效的方式。 Check this link

Answer 3

使用css伪类:hover

Answer 4

使用JQuery，您可以尝试

    $(document).on("mouseover", "#RollOver1", function(e) {
$(this).css("background", "url(sampleImage.png) no-repeat");
    }
});

Answer 5

您可以使用以下样式

.RollOver1:hover {
   background-image: url('paper.gif');
}

如何在悬停时更改背景图像更改

5 个答案: