css3中hover的使用细节

MaureenChen 2020-03-01

首先第一条很重要

元素添加hover伪类选择器时候一定要紧贴这hover，不能有空格，有空格的话会失效

错误例子：

ul :hover{} //ul后面有空格会失效

正确例子：

ul:hover{} // ul会显示出想要的效果

第二

当想要在父元素添加hover在子元素的实现效果
子元素应该写在hover后面空格隔开

li{
               width: 100px;
               height: 100px;
               border:1px solid #000;
               transition:transform 2s linear;
          }
          ul:hover .one{            // 子元素写在hover后面空格隔开
               transform:rotateY(90deg);
          }
          ul:hover .two{
               transform:rotateY(0deg);
          }
          ul:hover .thr{
               transform:rotateY(360deg);
          }
     </style>
</head>
<body>
    <div style="width: 300px;height : 300px; background-color:#ccc"></div>
     <ul>
          <li class="one">di1ge</li>
          <li class="two">di2ge</li>
          <li class="thr">di3ge</li>
     </ul>

这个例子中就是当鼠标经过ul的时候，li会在设置的角度旋转

注意

仅可以给自身的子元素设置样式，给其他元素子元素设置无效
接着上个例子举例子：

div:hover .one{}  //不显示任何效果，hover失效

: MaureenChen

相关推荐

audio标签、HOVER效果、rgba和opacity、隐藏场景

HTML5里引入的新标记 <audio> 和 <video> 实现了HTML对视频播放和音频播放的原生支持，有了这种原生的HTML5视频播放器/音频播放器，我们不再需要flash技术，而直接能将视频/音频嵌入到了网页中。contro

HSdiana 0喜欢 / 0评论 2019-12-27

myeclipse 关闭jsp悬浮提示

myeclipse越来越智能,身为码农的我却越来越伤心.虽然你很智能,但请你提供一些有用的信息给我,不要乱七八槽的,不问青红皂白就塞一大堆提示给我,对不起,哥不需要这些!!!都知道,使用myeclipse开发java,jsp,js时,鼠标划过某个类,对象,

lunareclipse 0喜欢 / 0评论 2019-12-23

css静态滤镜 + A:Hover

.i1 { width:64px; border:0px none #888; margin:0px; }. .a0:hover, .a0:active { filter:Alpha; display:block; height:64px; width:6

Uching 0喜欢 / 0评论 2006-11-13

浅谈jQuery的hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别

今天在网上看到一种说法，感觉有点问题，于是去jquery源码库查看了下，发现说法有误，这里记录指正下。hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleav

PHP基础学习 0喜欢 / 0评论 2019-01-15

css选择器

做项目遇到了一个css的问题，想记录一下，然后开通了思否一、常用的 1、.classname2、#id3、*4、标签选择器 {div} 、 {span}等，选择了页面全部的div、span等二、进阶的1、{ div, p,span}同时选择选择所有的di

dazhifu 0喜欢 / 0评论 2019-07-01

在一个元素上:hover，改变另一个元素的css属性

}是用css的选择器来实现的。

yezi 0喜欢 / 0评论 2019-06-28

浅谈jQuery的hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别

今天在网上看到一种说法，感觉有点问题，于是去jquery源码库查看了下，发现说法有误，这里记录指正下。hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleav

刁连通 0喜欢 / 0评论 2019-01-15

外部CSS样式实现hover鼠标悬停改变样式

在DIV+CSS网页布局中，有时我们不能直接使用外部CSS样式控制DIV样式，比如对a设置a:hover样式。可以使用onMouseOver和onMouseOut实现对a标签或其它html标签设置hover样式。直接对标签使用即可，无论A标签、SPAN标签

NARUTOLUOLUO 0喜欢 / 0评论 2016-07-11

jquery实现hover图片半透明效果

hover时实现此透明，只需以下代码：

ParadiserD 0喜欢 / 0评论 2016-04-16

CSS3实例教程:hover、active和:focus伪选择器。

CSS3的伪类选择器就是多，今天我们来学习新的伪类选择器——UL状态伪类选择器。这些选择器都有一个共同的特征名那就是定义的样式只有当元素处于某种状态下时才起作用，在默认状态下无效。　　今天我们先来接触:hover、active和:focus这三种状态伪类选

vavid 0喜欢 / 0评论 2016-01-16

用JS添加某些CSS属性导致:hover失效

不用js添加css属性，hover能正常设置背景颜色。左边的图是默认情况下，右边是鼠标放上去的时候，现在hover还是能正常显示的。但这并不是hover伪类失去的作用，如果设置不是js添加的样式，就能看出hover并没有失效，比如添加一下字体颜色试一下。原

yaodilu 0喜欢 / 0评论 2019-06-27

HTML5播放器FlowPlayer的极简风格效果

使用Flowplayer生成的极简风格的播放器效果。

owhile 0喜欢 / 0评论 2014-11-25

使用jQuery和CSS3生成的搜索框变形全屏搜索效果

使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现，可以帮助你更好利用页面格式和内容。实验性质的代码，请大家在产品环境里自己修改使用！

sorryericsson 0喜欢 / 0评论 2014-11-18

CSS3实现的苹果网站搜索框效果

用CSS3相关属性生成的动态搜索框效果。

hjfbluesky 0喜欢 / 0评论 2014-11-04

jquery hover ajax

--用class="stripe"来标识需要使用该效果的表格-->

hanliuxinming 0喜欢 / 0评论 2014-09-28

A链接点击后a:hover的CSS样式不起作用的问题原因与解决办法

A链接访问后a:hover的CSS样式不起作用的问题原因与解决办法>>>>>>>>>>>>>>>>>>>>>>>>

realitycss 0喜欢 / 0评论 2014-07-24

css学习 2 笔记

内联元素——span设置宽、高、margin都不会起作用，其它相邻元素不会被撑开。

liusure0 0喜欢 / 0评论 2014-07-06

在CSS中定义a:link、a:visited、a:hover、a:active顺序

以前用CSS一直没有遇到过这个问题，在最近给一个本科同学做的项目里面。出现一些问题，搜索引擎查了一些网站和资料，发现很多人问到这个问题，给出的结果我试了试，大部分都不正确。近日突然发现，原来这个CSS问题早已有高人提出啦。他给总结了一个便于记忆的“爱恨原则

AlisaClass 0喜欢 / 0评论 2014-05-05

css hover的问题

</html>这里让链接被点击后，hover效果便会失效。

尚衍亮 0喜欢 / 0评论 2014-04-01

jquery在ajax后新添加的元素，如何绑定事件hover,click？

live在1.7后增加，1,9后被移除，真够悲催的。die在1.9也不存在了。其实用on替代live是一样的，新增加的元素仍然能够触发事件。直接将下面例子保持为html，可以直接运行。<title>如何为div加样式"add"

83510998 0喜欢 / 0评论 2013-11-21

Jquery文字连接移动效果，鼠标放上去，横向移动特效

<div class="hover_style"><a href="#">文字滚动2222222222</a></div>JS代码：。</script>末了

87453661 0喜欢 / 0评论 2013-09-30

伪类 css

同时伪类也可以作为选择器使用，

zyhui 0喜欢 / 0评论 2013-05-24

十八、mouse

/** 当时有mouseover的时候，如果从父类移到子类依然也会得到* 一个父类的mouseout事件，很多时候这种处理是不需要的* 所以在JQuery中通过mouseenter和mouseleave来替换*/// $.on;// $.on;//在JQu

84483065 0喜欢 / 0评论 2013-05-08

jquery hover text plugin

var $el, $tempDiv, $tempButton, divHeight = 0;$el = $(this).css("border-color", "white");divHeight = $el.hei

恋雨烟梦 0喜欢 / 0评论 2013-03-18

CSS笔记 :hover改变另一个元素样式

显然，是要用到:hover来写，但应用的场景有点小讲究，分为两种情形。}CSS选择器表最后，这是目前的CSS选择器表，对应的版本也有标明。如有帮助，望不吝赐赞一枚，多谢，如有错误还望不吝指出。

nicepainkiller 0喜欢 / 0评论 2019-06-21

Jquery hover 事件中在 IE 中存在的 BUG[转]

Jquery hover 事件在 IE 中就存在 Bug ！因为帮朋友做一个在 elegant-box 主题中的特效要用到 Jquery 中的 hover 替换事件， hover 是 Jquery 中的一个关于鼠标移入、移出时间交替的事件，主要用于在鼠标

89453862 0喜欢 / 0评论 2013-02-20

前端学习总结【101天】：CSS——关于伪类hover选择器的测试

学习总结通过伪元素、伪类无法实现子元素选择父元素，后面的元素选择前面的元素。

nicepainkiller 0喜欢 / 0评论 2019-06-21

超链接标签a的效果设计

color:#0044ff; //点击前后颜色一致

葉無聞 0喜欢 / 0评论 2013-01-14

jquery事件

当使用这些方法不带参数时，结果将是触发操作而不是绑定行为，

zhangmingming 0喜欢 / 0评论 2012-12-14

jQuery hover事件

hover一个模仿悬停事件的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测，如果是，则会继续保持“悬停”状态，而不触发移出事件。

刁连通 0喜欢 / 0评论 2012-12-04

只用css 实现下拉导航栏

主要用的知识是css中的hover伪类，当鼠标放停在父导航栏上的li元素时候，我们就修改子菜单下面的ul的display属性，这样就可以实现hover的效果了。

昔人已老 0喜欢 / 0评论 2012-12-02

css控制按钮hover

<style type="text/css"> /* Css样式要放到页面头部，而且要加上<style> */. /* margin: 10px 0 0 20px;margin-top 和 margin-left

福叔 0喜欢 / 0评论 2012-11-27

纯CSS3进行hover时显示带箭头和动画的tips效果

由于sg没有关联获取它站文章的功能,把自己的原创博客给搬来给新手提供点简单教程.效果图:当鼠标放在ps,ai上显示对应的内容.其实那不过是个旋转了45°的正方形.transition: visibility 0s linear .2s,opacity .2

nicepainkiller 0喜欢 / 0评论 2019-06-21

[Web前端应用]--为超链接的文字取消下划线【难度 ★】

其中，上面的四个英文中，link是连接在平常的状态，active是在按下的那一刻的状态，visited是被访问完了过后的状态，hover是鼠标放置于超链接文字上面未点击的状态。

icecoffeemzp 0喜欢 / 0评论 2012-06-13

jquery解除hover事件的绑定方式

事实上是hover事件是有两个事件合起来的，所以解除hover事件的时候应该解除两个事件的绑定，$.unbind.unbind;

XiaoSpring 0喜欢 / 0评论 2012-03-15

Jquery中的hover()和toggle()用法

当鼠标移出这个元素时，会触发指定的第二个函数。//当鼠标放在表格的某行上时将class置为over，离开时置为out。});toggle: 每次点击时切换要调用的函数。//每次点击时轮换添加和删除名为selected的class。});两个函数都能实现轮番

JeWangZhe 0喜欢 / 0评论 2012-03-15

7 个基于CSS/JavaScript的鼠标悬停效果教程

鼠标悬停效果是网页制作的常用特效之一，早期使用Flash可以制作非常炫的效果，现在我们同样也可以使用CSS和JavaScript来实现。

沈宫新 0喜欢 / 0评论 2011-12-15

canvas模拟hover事件

<canvas id="cvs" width="300" height="300" style="border:1px solid #333;">你的浏览器不支持c

singlow 0喜欢 / 0评论 2011-11-17

JQuery hover

JavaScript下.onmouseover()和onmouseout()事件给我们的WEB页面交互带来了无数超炫的效果.而在JQuery里.取而代之的是hover事件.$.data;//当鼠标离开的时候,程序处理

zhangyang0 0喜欢 / 0评论 2011-11-16

从0开始学编程(6)-(125)--css,ps,边框 Yui

一只老鹰在天空盘旋。你不要围着桌子走来走去。他处于生死之间。

zhouguizhi 0喜欢 / 0评论 2011-10-21

IE6 中 A 标签 hover 伪类特殊性过高的问题（转载）

昨天在 <a>标签的伪类书写顺序问题中说到，A 标签的’:link’，’:visited’，’:hover’，’:actived’伪类的声明有顺序的限制，如果顺序不正确可能导致某些伪类的声明无效。但是，在 IE6 中声明顺序即使不正确， ‘:

zhouguizhi 0喜欢 / 0评论 2011-09-30

jquery如何取消hover事件

$("a").unbind;起不到任何作用，最后在stackover上查到解决办法：。$("a").unbind;在jquery的官方文档上有这方面的说明： jQuery documentation

88284453 0喜欢 / 0评论 2011-08-30

jquery hover hasClass insertBefore live blockUI children notice

message = "<div style='font-size: 20px; float: right;'><img src='images/ajax-loader.gif'/></div>";

XiaoSpring 0喜欢 / 0评论 2011-05-17

在CSS中定义a:link、a:visited、a:hover、a:active顺序

CSS样式表中a:link,a:visited,a:hover,a:active属性含义2008-02-08 19:53a:link,a:visited,a:hover,a:active 分别是什么意思，有什么用途。在CSS1中此伪类仅可用于a对象。且对

wolaizheli 0喜欢 / 0评论 2011-02-28

纯CSS实现的鼠标经过文本时提示的信息

正是你见到的，这些附加的说明文字是在鼠标经过的时候显示。

CoderChang 0喜欢 / 0评论 2012-12-05

JS实现css hover操作的方法示例

本文实例讲述了JS实现css hover操作的方法。分享给大家供大家参考，具体如下：

骆驼的自白 0喜欢 / 0评论 2017-04-07

使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条

废话不多说了，直接给大家贴代码了，具体代码如下所示：。-- 引入的css压缩文件 -->. -- 最后引入js，提高页面加载速度，由于这里用的是bootstrap3,所以jquery文件必须是1.9.1以上版本-->

purecss 0喜欢 / 0评论 2019-05-09

jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法

鼠标不移动进表格，表格透明度不变。先贴我已经实现好的效果，一开始，表格透明度不变。后来我就用jQuery的hover方法，不过它总是选中了里面的所有单元格，这其中过程很曲折，我就不一一介绍了，我就讲讲我怎么实现的。});content是我table的id名

kennsand 0喜欢 / 0评论 2019-05-05

完美解决jQuery的hover事件在IE中不停闪动的问题

在使用jQuery的hover事件时，经常会因为鼠标滑动过快导致菜单不停闪动的情况，相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩，非常的讨厌。今天在给一个网站设计菜单时也遇到了这个情况，结果在百度上找了N久，没有找到解决方法。在这里吐槽一下，百度太2

pplxh 0喜欢 / 0评论 2019-04-29