美文网首页前端相关笔记
用CSS实现移入某div高亮,其他div变暗

用CSS实现移入某div高亮,其他div变暗

作者: 爱阳光的小蘑菇 | 来源:发表于2017-11-09 20:35 被阅读60次

这是在项目中用到的一点,我的解决方式有两个要点:
1、所有div透明度设置为0.2;
2、hover的div设置透明度为1;


clipboard.png

实现代码为:

.container-fluid:hover .widget-content{opacity:0.2; } 
.widget-content{
  position:relative; margin-right:10px; 
  -webkit-transition: opacity 1s ease-in-out; 
  -moz-transition: opacity 1s ease-in-out; 
  -ms-transition: opacity 1s ease-in-out; 
  -o-transition: opacity 1s ease-in-out; 
  transition: opacity 1s ease-in-out; 
} 
.span6 .widget-content:hover{opacity:1; }

相关文章

网友评论

    本文标题:用CSS实现移入某div高亮,其他div变暗

    本文链接:https://www.haomeiwen.com/subject/cwimmxtx.html