2

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

CSSimgに属性を持つがあるからだと思います。backgroundCSSの代わりにJavascriptを使用してみてください。

私の答え以上のものを提供できるので、これを見ることができます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 に答える