2014-08-28 139 views
-1

我試圖將鼠標懸停在圖像上並希望在懸停時更改其顏色。圖像懸停如何更改顏色

我的HTML是:

<a href="#" data-reveal-id="myModal"> 
    <div id="wrap"><img src="img/plan1.png" alt=""></div> 
</a> 
<div id="myModal" class="reveal-modal xlarge" data-reveal> 

CSS:

#wrap { 
    position:relative; 
} 

#wrap:hover  { 
    position:relative; 
    border: blue; 
}  

有人請幫助,我不知道我要去哪裏錯了。

+0

這隻能由JavaScript來實現。您應該搜索一些可動態編輯圖像顏色或對其應用濾鏡的腳本。 – ascx 2014-08-28 09:17:45

+1

我完全不理解你的問題。 你的照片是什麼?應該改變什麼顏色? 邊框顏色或圖像中的顏色? – 2014-08-28 09:18:56

+0

http://css-tricks.com/almanac/properties/f/filter/ – haxxxton 2014-08-28 09:23:55

回答

0

您需要獲取鏈接的懸停狀態,而不是div的懸停狀態。

CSS:

a:hover #wrap img{ 
    border: 1px solid blue; 
} 

或者,如果你想有你的圖像上的過濾器(不完全支持)

a:hover #wrap img{ 
    -webkit-filter: hue-rotate(90deg); 
    filter: hue-rotate(90deg); 
} 
1

參見下列小提琴。

HTML:

<div class="container"> 
    <img src="http://placehold.it/200x200" alt=""> 
</div> 

CSS:

img:hover 
{ 
    border:solid 2px blue;  
} 

http://jsfiddle.net/70e8h6z1/