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

    转载:http://www.cnblogs.com/ziyi--caolu/archive/2013/08/04/3236035.html

  2. Javascript初学篇章_3(注释/if/switch)

    五.javascript的注释 // 单行注释 /* …*/ 多行注释 注:多行注释不能互相嵌套 六.程序流程控制 一.条件语句 if 语法: if(condition) statements1 el ...

  3. linux中test与[ ]指令的作用

    linux中test与[ ]指令的作用: 在Linux中,test和[ ]功能是一样的,类似于c语言中的( ).不过Linux的test和[ ]是指令.在和if或者while联用时要用空格分开.

  4. 无聊拆中国银行密码器和农业银行U盾

    原始状态 不知从何下手,直接斜口钳暴力剪开 开始露出电路板了,继续拆 拆完是这样的,屏幕没有焊接,直接靠外壳压上去的 背面图 相对而言,农行的就很好拆 后盖很好撬开 前面就是按键,没什么,屏是1286 ...

  5. Android课程---关于数据存储的学习

    activity_data1.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...

  6. Public DNS (公共域名解析服务)

    114DNS 服务IP:114.114.114.114, 114.114.115.115 拦截 钓鱼病毒木马网站:114.114.114.119, 114.114.115.119 拦截 色情网站:11 ...

  7. maven配置

    java 环境变理 http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html maven环境变理 http://www.cnblog ...

  8. Ubuntu 16.04 几个国内更新源

    http://blog.csdn.net/paincupid/article/details/52895676 如何更改源 1/ 在修改source.list前,最好先备份一份 执行备份命令 sudo ...

  9. jqurey datatable mRender FnRender 不起作用问题

    用这个插件的   知道他不起作用,就应该知道他是做什么的了吧,我的不起作用的原因是版本的问题 我在网上查找的用法 是 "fnRender":fuction(obj){} 可是不起作 ...

  10. servlet的匹配规则，兼谈/与/*

    客户端通过URL地址访问服务器(servlet容器)资源,所以servlet若要能对外提供服务,必须要将程序按照java规范将其映射到对应的URL上,映射的规则是需要开发人员在WEB.XML中显示指定 ...