CSS 图像悬停在 Internet Explorer 和 Firefox 上不起作用答案

【问题标题】：CSS image hover doesn't work on Interner Explorer and FirefoxCSS 图像悬停在 Internet Explorer 和 Firefox 上不起作用
【发布时间】：2014-02-01 03:43:38
【问题描述】：

目前我只想使用 CSS 和 HTML 来解决这个问题，因为我还不知道 JavaScript 或 jQuery。

因此，当我在 Chrome 中将鼠标悬停在该超链接图像上时，该超链接图像会发生变化（它会发光），但它在 Internet Explorer 和 Firefox 中不起作用。（Internet Explorer 版本：11，Firefox 版本：26.0）

我读到 Internet Explorer 只能识别“锚点”，但我不知道如何将鼠标悬停在标签中，因为 CSS 页面与 HTML 页面是分开的。我也尝试过写a#x{...}，但它不起作用。

HTML：

<a href="http://www.google.com">
   <img id="x" style="position:absolute; top:300px; left:950px;" 
    src="images/x.png"/>
</a>

CSS：

#x{
    width:188px;
    height:253px;
}

#x:hover{
    content: url(images/xhover.png);
    width:188px;
    height:253px;
}

我尝试把content改成background-image，结果就是悬停图片是原来的大小，高度和宽度都不会被修改，一直停留在背景上，所以第一张图片不会重叠... 我尝试查看其他帖子，但找不到适合我的解决方案...

【问题讨论】：

stackoverflow.com/questions/18813299/…

标签： css image internet-explorer firefox hover

【解决方案1】：

改变

content:url(images/xhover.png);

到

background:url(images/xhover.png);

DEMO here.

【讨论】：

我看到这也适用于 IE，但现在悬停图像改变了大小并停留在背景上，因此结果非常难看......我无法用宽度和CSS 文件中的高度！

【解决方案2】：

试试：

<a href="http://www.google.com" class="link">
    <img class="imgHover" src="http://lorempixel.com/400/200/" alt="image">
    <img class="imgHover" src="http://lorempixel.com/400/200/nature/1" alt="image">
</a>


<style type="text/css" media="screen">
    .imgHover:first-child{
        display: none
    }

    .link:hover .imgHover:first-child{
        display: block;
    }

    .link:hover .imgHover:last-child{
        display: none;
    }
</style>

正确的做法是使用背景，但是如果你需要使用标签这可以是一个很好的解决方案。

【讨论】：

最佳答案。谢谢！