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

【问题标题】：How to handle hover on different element and change the images of different element by css only如何处理悬停在不同元素上并仅通过 css 更改不同元素的图像
【发布时间】：2014-01-21 14:15:09
【问题描述】：

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

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

我想纯粹在 css 中实现，而不是在 jQuery 和 js 中......

【问题讨论】：

简单写：div:hover i { /* your css*/ }

标签： java jquery css less

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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% 工作代码。在您的系统中检查后，请选择此帖子作为答案...

【讨论】：