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

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

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

html代码

<body>

   <div class="hover">

     <a href="#">滑动</a>

     <img src="data: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:}

   .hover:hover .trans{visibility: visible;opacity:;}

    </style>

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

so一目了然了吧

【笔记】css hover 伪类控制其他元素的更多相关文章

  1. 利用CSS hover伪类改变其他元素的总结

    :hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...

  2. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  3. CSS :hover伪类选择定义和用法

    伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元 ...

  4. css -- hover伪类

    CSS代码: .btn-setDefaultGateway{display: none;} .netDiv:hover span .btn-setDefaultGateway { display: i ...

  5. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  6. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  7. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  8. CSS的伪类和伪元素

    伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...

  9. 【CSS】伪类与伪元素

    一伪类 语法: selector : pseudo-class {property: value} 提示:伪类名称对大小写不敏感.    与 CSS类搭配使用 selector.class : pse ...

随机推荐

  1. 【清北学堂】 死亡（death）

    M个位置可以打sif,N+1个人等着打sif,已知前N个人的时间,问第N+1个人什么时候才能打sif(不能插队,即必须按顺序来打sif) 输入N,M以及每个人所需要的时间:输出第N+1个人所需的时间 ...

  2. bzoj4511：[Usaco2016 Jan]Subsequences Summing to Sevens

    题目大意:给个序列,求最长的连续子序列使其为7的倍数 又是一道令人欢喜的不用怎么用脑的水题.. 边读入,边计算前缀和 分别保存前缀和%7结果为1,2,3,4,5,6的第一次的位置 然后减一减就知道长度 ...

  3. 对拍老是忘记的看这里：bat代码

    需要写三个程序,makedata.exe 产生测试数据, program1.exe 是你要检测的程序,program2.exe 往往是一个正确但效率不高(暴力的居多)的程序. 代码很简单,稍作解释:l ...

  4. Mysql5.7.14安装配置

    Mysql5.7.14免安装版配置方法: 运行 在命令行中输入 mysqld install mysql5.7 安装成功后,启动mysql 在命令行中输入 net start mysql5.7 这个时 ...

  5. Open Data Structure Templates

    数据结构模板 Chen 2016/12/22 前言 本篇博客的模板,全部是我纯手打的,如果有发现错误,请在下方留言指正:).欢迎大家参考. 有一些地方还不是很完善,等过一阵子用C++实现和部分重构下. ...

  6. Google内部邮件：如何进行高效的时间管理能量波动图

    Google内部邮件:如何进行高效的时间管理能量波动图 发布时间: 2015-12-16 22:16:50| 阅读数:462 views 最近,我给团队内部写了一封简单的邮件.主要内容是征询他们,如何 ...

  7. plsql11.06注册码

    plsql11.06注册码:Product Code(产品编号):4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number(序列号):601769password ...

  8. sql server2008登录出错怎么整

    我在登录的时候老是报同一个错误,如下图: 更正方法: 这样改了之后就可以了!

  9. angularJs之定时器

    $timeout 服务 AngularJS $timeout 服务对应了 JS window.setTimeout 函数. 实例 两秒后显示信息: var app = angular.module(' ...

  10. iOS导航栏的正确隐藏方式【转】

    简介:在项目中经常碰到首页顶部是无限轮播,需要靠最上面显示.有的设置导航栏为透明等一系列的方法,这个可以借助第三方.或者干脆简单粗暴的直接隐藏掉导航栏.可是push到下一个页面的时候是需要导航栏的,如 ...