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

    编译大作业的第一次检查终于过去了,已经经过这次检查的组员们可以暂时松一口气了. 也希望编译大作业有着落的成员可以多花一些时间在团队任务上,帮其他的组员多分担一些工作. 第一次没来的及检查的同学,或是没 ...

  2. Git中三种文件状态及其转换

    查看地址http://phplaber.iteye.com/blog/1699926

  3. 键盘和alertView的冲突问题

    冲突现象: textField失去响应收键盘时,如果要弹出一个alertView警告框,就会出现一个现象:在点击了alertView上的事件后,在alertView消失后,会有短暂的出现键盘会再次弹出 ...

  4. Ubuntu apt-get "Hash Sum mismatch" 问题解决方法

    参考:ubuntu: apt-get update的时候遇到"Hash Sum mismatch"错误 在安装Mininet的时候,apt-get update的时候遇到了这个问题 ...

  5. Spring IoC容器初始化过程学习

    IoC容器是什么?IoC文英全称Inversion of Control,即控制反转,我么可以这么理解IoC容器: 把某些业务对象的的控制权交给一个平台或者框架来同一管理,这个同一管理的平台可以称为I ...

  6. caffe中的BatchNorm层

    在训练一个小的分类网络时,发现加上BatchNorm层之后的检索效果相对于之前,效果会有提升,因此将该网络结构记录在这里,供以后查阅使用: 添加该层之前: layer { name: "co ...

  7. 在Mac OS X 下快速安装Nginx

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Helvetica; color: #8e68ff } p.p2 { margin: 0.0p ...

  8. JMeter学习-035-JMeter调试工具之二---Debug PostProcessor

    前文 JMeter学习-034-JMeter调试工具之一---HTTP Mirror Server讲述了HTTP镜像服务器在调试请求入参时的实例应用.此文我们讲述另一种测试脚本调试工具的使用. 前置处 ...

  9. Python学习【第五篇】循环语句

    Python循环语句 接下来将介绍Python的循环语句,程序在一般情况下是按顺序执行的. 编程语言提供了各种控制结构,允许更复杂的执行路径. 循环语句允许我们执行一个语句或语句组多次. Python ...

  10. web app上传图片

    很就很久以前,web app上传图片需要通过cordova插件,那时候好像还叫phonegap. 后来一个html标签就可以了 <input type="file" clas ...