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

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

posted @ 2016-10-10 10:53  Stitch晨  阅读(1875)  评论(0)  编辑  收藏  举报