Question

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

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

我读到Internet Explorer只识别“锚点”，但我没有任何线索如何将悬停放在＆lt; a＆gt;中。选项卡，因为CSS页面与HTML页面分开。我也尝试写＃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，但结果是悬停图片的尺寸为原始尺寸，其高度和宽度不会被修改，并且会保留在背景上，所以第一张图片不会重叠...... 我试着检查其他帖子，但我找不到合适的解决方案......

Answer 1

更改

content:url(images/xhover.png);

到

background:url(images/xhover.png);

DEMO here.

Answer 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>

正确的方法是使用背景，但如果你需要使用标签＆lt; img＆gt;这可能是一个很好的解决方案。

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

2 个答案: