我想在容器悬停时在元素上制作简单的动画。不知道用CSS语法应该怎么写。
<article class="col-md-4 offer-box">
<div class="media">
<div class="media-left">
<i id="icon" class="fa fa-paint-brush"></i>
</div>
<div class="media-body">
<h4 class="media-heading" id="text-light">Web Design</h4>
<p class="text-muted">Pellentesque habitant
morbi tristique senectus et netus et
malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae,
ultricies eget, tempor sit amet, ante.
Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
</div>
</div>
</article>
#icon{
color: #ef5925;
font-size: 35px;
transition-duration: 1s;
}
.offer-box:hover{
#icon{
color: #fff;
font-size: 40px;
}
}
最佳答案
您的 css 语法错误。像这样写:
.offer-box:hover #icon{
color: #fff;
font-size: 40px;
}
关于html - Css3 过渡 - 悬停覆盖元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33119513/