2

我有两张图片，当您将鼠标悬停时，另一张图片应该显示出来，并且显示得更亮。

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

3 回答 3

1

I had a similar problem once in IE with a png image. Is it with all browsers? If so, it might be as Ennui said with transparency in the image. Maybe turn it into a jpeg if transparency isn't a requirement. Also, is javascript a possibility? Then you can get rid of some of that 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>

also, with the above, Where is the beginning of the 'a' tag? I only see the end.

于 2012-10-19T20:19:50.867 回答
0

我认为这是因为您在 CSS 中有一个imgwith属性。background尝试使用一些 Javascript 而不是 CSS。

你可以看看这个因为它可以为你提供比我的答案更多的答案http://api.jquery.com/hover/

于 2012-10-19T20:06:56.703 回答
0

最可能的原因是悬停状态图像 (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？

于 2012-10-19T20:13:57.657 回答