图像看起来褪色悬停

我有两个图像，当你徘徊其他图像应显示，并显示更明亮。图像看起来褪色悬停

由于某种原因，当您将鼠标悬停在图像上时，图像（在.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; 
}

来源

2012-10-19 TeaDrinkingGeek

在这里似乎很好http://jsfiddle.net/j08691/Nbkda/ – j08691

背景图片可能会有不同的不透明度。 –

wut？ 2个imgs在哪里？ – Toping

我有一个类似的问题曾在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'标签的开头在哪里？我只看到结局。

来源

2012-10-19 20:19:50 Bender

这是一个很好的解决办法。 – TeaDrinkingGeek

我想这是因为你在CSS的background属性的img。尝试使用一些JavaScript代替CSS。

你可以看看这个ecause它可以为您提供比我的回答http://api.jquery.com/hover/

来源

2012-10-19 20:06:56 Victor

怎么样，你的意思是什么样的例子？ – TeaDrinkingGeek

您必须为MouseEnter和Leave创建事件处理程序，在这些事件处理程序中更改图像的SRC。 – Victor

这个最可能的原因是，悬停状态的图像（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有关，这些CSS正在影响有问题的元素。你有链接到该网站？

虽然这是一个非常奇怪的方式来制作翻转，但为什么不让A标记为块级元素并将其背景设置为默认图像并将鼠标悬停在：hover psuedoclass上？

来源

2012-10-19 20:13:57 Ennui

图像看起来褪色悬停

回答

相关问题