图像悬停如何更改颜色

-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; 
}

有人请帮助，我不知道我要去哪里错了。

来源

2014-08-28 Rahid

这只能由JavaScript来实现。您应该搜索一些可动态编辑图像颜色或对其应用滤镜的脚本。 – ascx 2014-08-28 09:17:45

我完全不理解你的问题。你的照片是什么？应该改变什么颜色？边框颜色或图像中的颜色？ – 2014-08-28 09:18:56

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

您需要获取链接的悬停状态，而不是div的悬停状态。

CSS：

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

或者，如果你想有你的图像上的过滤器（不完全支持）

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

来源

2014-08-28 09:26:45 TeeDeJee

参见下列小提琴。

HTML：

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

CSS：

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

http://jsfiddle.net/70e8h6z1/

来源

2014-08-28 09:28:30 Marciano

图像悬停如何更改颜色

回答

相关问题