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

    UDAF: 多进一出 GenericUDAFEvaluator : 就是根据job的不同阶段执行不同的方法 Hive通过GenericUDAFEvaluator.Modle来确定job的执行阶段 PA ...

  2. PHP入门介绍与环境配置

    浏览目录: 一.PHP的背景和优势: 二.PHP原理简介: 三.PHP运行环境配置: 四.编写简单的PHP代码以及测试. 一.PHP的背景和优势 1.1   什么是PHP? PHP是能让你生成动态网页 ...

  3. 【整理】深入理解拉格朗日乘子法（Lagrange Multiplier) 和KKT条件

    在求解最优化问题中,拉格朗日乘子法(Lagrange Multiplier)和KKT(Karush Kuhn Tucker)条件是两种最常用的方法.在有等式约束时使用拉格朗日乘子法,在有不等约束时使用 ...

  4. Windows下用VMware安装Ubuntu虚拟机

    安装: http://jingyan.baidu.com/article/0320e2c1ef9f6c1b87507bf6.html 全屏: http://jingyan.baidu.com/arti ...

  5. 【java基础学习】网络编程

    网络编程 InetAddress tcp udp

  6. erlang调试之JCL

    Job control mode (JCL), in which jobs can be started, stopped, detached or connected. Only the curre ...

  7. SSD Trim Support -- 保护 SSD

    今天同事告诉我,换了 ssd 之后需要做以下配置能使 ssd 寿命更长.原理是配置系统定期清理和回收 ssd 的资源. 最终效果: 步骤: 1.下载 trim enabler: https://gis ...

  8. python第一站

    python 第一站,豆瓣-美国末日评论小爬虫 最近学习python,但是光是看书看视频学习,总是觉得掌握的不够扎实.所以就决定自己去写写爬虫,当带着目的性去学,也许更容易发现自己需要什么.这是酝酿多 ...

  9. 让div支持placeholder属性/模拟输入框的placeholder属性

    实现方式:css div:empty:before{ content: attr(placeholder); color:#bbb;}div:focus:before{ content:none; }

  10. Java 泛型约束

    类型约束: import java.util.List; import java.util.ArrayList; import java.util.LinkedList; /** * Created ...