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

最新推荐文章于 2024-07-31 14:35:30 发布

第八个猴子

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量515

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/stitchgogo/p/5944947.html

版权

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

转载于:https://www.cnblogs.com/stitchgogo/p/5944947.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

第八个猴子

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【笔记】css hover 伪类控制其他元素

最近在模仿一个网站的项目当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的但是这有一个要求就是添加hover伪类的元素必须是被改变的元素的父类所以，看看一下代码你就会明白的了html代码<body> <div class="hover"> ...
复制链接

扫一扫