最近在模仿一个网站的项目 当中有一个效果需要利用到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一目了然了吧