图像悬停如何更改颜色
问题描述:
我试图将鼠标悬停在图像上并希望在悬停时更改其颜色。图像悬停如何更改颜色
我的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;
}
有人请帮助,我不知道我要去哪里错了。
答
您需要获取链接的悬停状态,而不是div的悬停状态。
CSS:
a:hover #wrap img{
border: 1px solid blue;
}
或者,如果你想有你的图像上的过滤器(不完全支持)
a:hover #wrap img{
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
答
参见下列小提琴。
HTML:
<div class="container">
<img src="http://placehold.it/200x200" alt="">
</div>
CSS:
img:hover
{
border:solid 2px blue;
}
这只能由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