Question

我试图将鼠标悬停在图像上，并希望在悬停时更改其颜色。

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

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

Answer 1

请参阅以下小提琴。

HTML：

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

CSS：

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

http://jsfiddle.net/70e8h6z1/

Answer 2

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

CSS：

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

或者，如果您想在图片上设置过滤器（不完全支持）

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

图像悬停如何改变颜色

2 个答案: