最近在模仿一个网站的项目 当中有一个效果需要利用到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. MySQL支持的数据类型(1)( 整数，小点，位)

      整数类型 字节 最小值 最大值 tinyint 1 有符号-128 无符号0 有符号127 无符号255 smallint 2 有符号-32768 无符号0 有符号32767 无符号65535 m ...

  2. scala shuffle

    val arr = (0 to 100).map(_ * 1d) /// 下面这一步只能用to不能用until,scala里面实现返回的两个Range继承路径不同,不能混用 val a_shuffle ...

  3. URL重写无效

    在IIS7或以上版本中使用urlrewriter时会出现无效的现像,这时候需要使用以下设置

  4. IOS网络第二天 - 04-黑酷-GDataXML 解析

    ****** - (void)viewDidLoad { [super viewDidLoad]; /** 加载服务器最新的视频信息 */ // 1.创建URL NSURL *url = HMUrl( ...

  5. 百钱买百鸡问题 php版本

    /* * 百钱买百鸡问题 * * 我国古代数学家张丘建在<算经>一书中曾提出过著名的“百钱买百鸡”问题,该问题叙述如下:鸡翁一,值钱五:鸡母一,值钱三:鸡雏三,值钱一:百钱买百鸡,则翁.母 ...

  6. windows计划任务+批处理文件实现oracle数据库的定时备份与恢复

    1.  备份: PS:2014-1-15 如果导出的dmp数据文件不大的话,就直接每天导出好了,不要只保存七天的数据.然后顶起通过winrar对文件进行打包,我发现dmp文件的压缩包还是很高的. 那么 ...

  7. 在eclipse中创建一个Maven项目

    1. 首先判断eclipse有没有自带Maven Window –> Perferences 如果有Maven,那就是自带了maven插件,如果没有,需要自行安装. 2.配置maven 2.1. ...

  8. php+mysql+Apache环境搭建

    最近有一个小程序需要用php来跑,记录一下php的环境配置过程. 1.首先在下载集成工具wamp,WAMP是指在Windows服务器上使用Apache.MySQL和PHP的集成安装环境,可以快速安装配 ...

  9. vmware rdm

    RDM即裸磁盘映射,基本思想就是将host的磁盘直接映射给虚拟机使用   需要讨论的是: 1.rdm磁盘是否允许设置为共享,即可以映射给多个虚拟机使用(vmware不可用)   在 vSphere W ...

  10. shell面试题目总结

    1.如何理解shell脚本中第一行#!/bin/sh #!为特殊的表示符,其后是解释此脚本的shell的路径.此脚本使用/bin/sh进行解释执行. 2.如何向脚本传递参数. 脚本名字 参数1 参数2 ...