您的位置：首页 > Web前端 > CSS

【笔记】css hover 伪类控制其他元素

2016-10-10 10:53 495 查看

最近在模仿一个网站的项目当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的

但是这有一个要求就是添加hover伪类的元素必须是被改变的元素的父类

所以，看看一下代码你就会明白的了

html代码

<body>
<div class="hover">
<a href="#">滑动</a>
<img src="images/p1.jpg" class="trans">
</div>
</body>

css代码

<style type="text/css">
.trans{
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.trans{position:absolute; margin-top:20px;visibility: hidden;opacity: 0}
.hover:hover .trans{visibility: visible;opacity: 1;}
</style>

代码的原意是当我鼠标滑过class为 hover的 div 的时候 hover下面的子元素image就会显示并呈现出淡入淡出的效果

so一目了然了吧

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航