圖像看起來褪色懸停

我有兩個圖像，當你徘徊其他圖像應顯示，並顯示更明亮。圖像看起來褪色懸停

由於某種原因，當您將鼠標懸停在圖像上時，圖像（在.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

圖像看起來褪色懸停

回答

相關問題