Question

我有两张图片，当你悬停其他图片时应显示，并显示更亮。

出于某种原因，当您将鼠标悬停在图像上时，图像（在.top-1-1中）看起来会更褪色。

如何解决这个问题？

HTML

 <div class="top-1-1"><a href="experiences.aspx">
       <img src="images/myexperience.png" width="111" height="23" alt="My Experience" /></a>
  </div>

CSS

.top-1-1 {
    float: left;
    width: 111px;
    height: 23px;
    margin: 10px 0px 0px 10px;
    padding: 0;
    background :url("../images/myexperience-on.png") no-repeat;

}

.top-1-1 a, .nav a:link, .nav a:visited {
  display:block;
  width: 111px;
  height: 23px; 
}

.top-1-1 a:hover img {
  visibility:hidden;
}

Answer 1

我曾在IE中使用png图像遇到过类似的问题。它适用于所有浏览器吗？如果是这样的话，可能就像Ennui所说的那样，图像具有透明度。如果不要求透明度，也许把它变成jpeg。还有，javascript有可能吗？然后你可以摆脱一些CSS。

<div class="top-1-1"><a href="experiences.aspx">

<img onmouseover="this.src='images/myexperience-on.png'" onmouseout="this.src='images/myexperience.png'" src="images/myexperience.png" width="111" height="23" alt="My Experience" /></a>

</div>

另外，如上所述，'a'标签的开头在哪里？我只看到了结局。

Answer 2

我认为这是因为您在CSS中拥有img属性background。尝试使用一些Javascript代替CSS。

你可以看看这个因为它可以提供的不仅仅是我的回答http://api.jquery.com/hover/

Answer 3

最可能的原因是悬停状态图像（myexperience-on.png）具有一定的透明度。尝试为css添加背景颜色：

background: #FFF url("../images/myexperience-on.png") no-repeat;

或

background: #000 url("../images/myexperience-on.png") no-repeat;

或者您可以编辑图像并将其转换为jpg（无透明度）或添加背后带有纯色背景的图层以确保图像。

如果不是那样，那么我不确定问题是什么，它可能与您网站上影响相关元素的某些javascript或其他CSS有关。你有这个网站的链接吗？

这是一个非常奇怪的方法来进行翻转 - 为什么不将A标记设置为块级元素并将其背景设置为默认图像并将鼠标悬停在：hover psuedoclass？

Hover上的图像看起来很褪色

3 个答案: