Question

如何处理悬停在不同元素上并仅通过css更改不同元素的图像

例如，假设图像在“i”中用作背景，我们需要在悬停时将鼠标悬停在“div”上时更改为图像。元素结构是..
div
i
div

我想这样做纯粹用css 而不是用jQuery和js ....

Answer 1

试试这个

div:hover i{
  background:url(imageURL);
}

Answer 2

<style>
i {
background:url(1.png) no-repeat;
}
div:hover i
{background:url(2.png) no-repeat;
}
</style>
<body>
<div>
<i>
</div>
</body>

Answer 3

好的，没问题。您的问题将像CSS和HTML代码一样得到解决。请遵循以下代码

CSS和HTML代码 -

<html>
<title></title>
<style>
#div_background{
background-image:url('imgname.extension');
height:xyz;
width:xyz;

}

#div_background:hover{
background-image:url('imgname.extension');
height:xyz;
width:xyz;

}
</style>
 <body>
 <div id="div_background"></div>
 </body>
 </html>

您可以根据您的结构编辑此代码

这是100％正常工作的代码..在你的系统中检查后，请选择这个帖子作为答案......

如何处理悬停在不同元素上并仅通过css更改不同元素的图像

3 个答案: