精华内容
下载资源
问答
  • css中hover是什么意思

    千次阅读 2021-06-10 07:01:25
    css:hover是一个伪类选择器,:hover伪类选择器在鼠标移到元素上时向此元素添加特殊的样式。:hover选择器适用于所有元素。要使用css对HTML页面的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器...

    css中:hover是一个伪类选择器,:hover伪类选择器在鼠标移到元素上时向此元素添加特殊的样式。:hover选择器适用于所有元素。

    c0b56590e418e31a12cd36a8e90e00a5.png

    要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。

    :hover 选择器用于选择鼠标指针浮动在上面的元素。

    提示::hover 选择器可用于所有元素,不只是链接。

    :link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。

    在 CSS 定义中,:hover必须位于:link 和:visited 之后(如果存在的话),这样样式才能生效。

    注意:在 IE 中必须声明 才能保证:hover选择器能够有效。

    示例:

    p:hover {

    color: red;

    }

    a.ex1:hover {

    color: red;

    }

    a.ex2:hover {

    font-size: 150%;

    }

    a.ex3:hover {

    background: red;

    }

    a.ex4:hover {

    font-family: '微软雅黑';

    }

    请把鼠标指针移动到这些链接上。

    这个链接改变颜色。

    这个链接改变字体大小。

    这个链接改变背景色。

    效果图:

    406c934a9499990fb5270e3112a8d377.gif

    展开全文
  • 当我们在使用css中hover时,偶尔会遇到无效的情况,这个真是让人很焦急。那么到底是什么原因导致失效的呢?本篇文章就给大家总结一下css中hover失效的原因。css中hover的用法具体代码示例如下:.one {margin: 0 auto...

    5268f80b9b1e01f982625ef6fac83ca1.png

    当我们在使用css中hover时,偶尔会遇到无效的情况,这个真是让人很焦急。那么到底是什么原因导致失效的呢?本篇文章就给大家总结一下css中hover失效的原因。

    css中hover的用法具体代码示例如下:

    .one {

    margin: 0 auto;

    width: 400px;

    height: 300px;

    background: #ced05d;

    }

    .two {

    margin: 0 auto;

    width: 100px;

    height: 100px;

    background: #5a5aea;

    }

    .three {

    margin: 0 auto;

    width: 200px;

    height: 100px;

    background: #4b9c49;

    }

    .four {

    margin: 0 auto;

    width: 300px;

    height: 100px;

    background: #7b4141;

    }

    .one :hover {

    background: #da56d0;

    }

    css中hover的用法测试

    无效原因总结:

    一、上述代码测试时发现鼠标经过class为one的时候背景不变,而经过one里面的其他div背景颜色发生变化,说明了:hover前加空格,本身不会有:hover的效果,而后代元素会有:hover的效果。

    二、只有后代元素和兄弟元素(紧接在元素后的兄弟元素)才有效果,其他的:hover会失效

    三、类名错误;

    四、:hover 被置于 :link 和 :visited 之前也是无效的;

    注::hover 选择器用于选择鼠标指针浮动在上面的元素。

    提示::hover 选择器可用于所有元素,不只是链接。

    提示::link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。

    展开全文
  • hover的用法

    2021-12-12 21:14:35
    hover的用法hover动态伪类选择器效果使用方法目标1:hover目标2 hover动态伪类选择器 效果 可以使鼠标滑过前面紧贴元素目标1时,触发动态效果. 在使用时只要确保hover前紧贴的元素是鼠标滑过的目标,最后花括号前的元素...

    hover动态伪类选择器

    效果

    可以使鼠标滑过前面紧贴元素目标1时,触发动态效果.
    在使用时只要确保hover前紧贴的元素是鼠标滑过的目标,最后花括号前的元素是希望改变属性的目标即可.

    使用方法

    目标1:hover目标2

    1.在使用时可以先不加:hover,直接先确保在花括号前的选择器可以精准的选择到目标(层次选择器也不会影响正常使用.)
    例如
    .box1+.box2 .box3>.box4+.box5
    2.如果想让选中box3时box5发生变化则可以直接在.box3后加:hover即可
    即.box1+.box2 .box3:hover>.box4+.box5{}

    展开全文
  • 给平淡的站点带来活力hover效果能给网页增加一些动态效果,并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器的支持,我们可以用纯粹的CSS代码来实现这些有趣...

    给平淡的站点带来活力

    hover效果能给网页增加一些动态效果,并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器的支持,我们可以用纯粹的CSS代码来实现这些有趣的效果。所谓的现代浏览器,更多的是指以Mozilla和Webkit为核心的浏览器,IE的表现稍微差强人意,所以请使用FireFox,Safari或者Chrome查看一下的效果。如下就是要介绍的5个非常酷的纯CSS hover 效果。

    向上跳跃

    be0923700bfc0b4fc61979cba6e4aaac.png

    这种效果非常适合于当页面上有一横排图片的场景,当鼠标hover时就产生波浪一样的效果。

    这个效果实现是非常简单的,并且有多种方法实现,如下的核心实现方法是:初始给所有图片设置mergin,当hover时,给相应的图片减少mergin的值,这样就实现了向上跳跃的效果。

    这种效果不光可以应用于图片,一般的横向排列的导航栏也可以应用这样的效果。

    效果中的透明效果是并不是必须的,不设置透明属性并不影响hover时的跳跃效果,加上透明只是为了让效果更平滑。

    CSS代码:

    复制代码代码如下:

    .ex1 img{

    border: 5px solid #ccc;

    float: left;

    mergin: 15px;

    -webkit-transition: mergin 0.5s ease-out;

    -moz-transition: mergin 0.5s ease-out;

    -o-transition: mergin 0.5s ease-out;

    }

    .ex1 img:hover {

    mergin-top: 2px;

    }

    查看Demo

    层叠与放大

    e8d78140d34fd56cc5aaac2cc5c54cf9.png

    这种效果类似于熔岩灯效果,当鼠标从上至下移动时,每个图片都是慢慢地放大然后恢复到原始的状态。

    为了实现这样的效果,首先把原始图片显示的时候缩小一点,当鼠标hover时,放大图片的尺寸。

    因为图片是居中显示的,所以当鼠标hover时,也增加了图片的mergin,这样使得当图片放大时也是居中的效果。

    CSS代码

    复制代码代码如下:

    /*Example 2*/

    #container {

    width: 300px;

    mergin: 0 auto;

    }

    #ex2 img{

    height: 100px;

    width: 300px;

    mergin: 15px 0;

    -webkit-transition: all 1s ease;

    -moz-transition: all 1s ease;

    -o-transition: all 1s ease;

    }

    #ex2 img:hover {

    height: 133px;

    width: 400px;

    mergin-left: -50px;

    }

    查看Demo

    文字淡入

    d60ee0cb14a9fe8f606e0ca796410b79.png

    类似的这种效果,一般是用JavaScript来实现的,当hover其中某个元素时,另一个元素发生一些变化。本例为了实现这一效果,首先把图片和文字放在一个div里,然后设置div的color:transparent和line-height:0px。当hover时,更改color和line-height属性,使得文字显示。

    CSS代码

    复制代码代码如下:

    #ex3 {

    width: 730px;

    height: 133px;

    line-height: 0px;

    color: transparent;

    font-size: 50px;

    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-weight: 300;

    text-transform: uppercase;

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    }

    #ex3:hover {

    line-height: 133px;

    color: #575858;

    }

    #ex3 img{

    float: left;

    mergin: 0 15px;

    }

    查看Demo

    旋转的图片

    471ad82b24c72551aab4f7f54bc503e0.png

    实现这个效果是非常容易的,但是因为这是一个非常重要的效果,尤其对于画廊中的缩略图。这个效果中我们使用了一些较新的CSS样式。这个例子使用了box-shadows,transitions和transforms。transform是实现旋转部分,transition是为了让效果更平滑。

    CSS代码

    复制代码代码如下:

    #ex4 {

    width: 800px;

    mergin: 0 auto;

    }

    #ex4 img {

    mergin: 20px;

    border: 5px solid #eee;

    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    -webkit-transition: all 0.5s ease-out;

    -moz-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    }

    #ex4 img:hover {

    -webkit-transform: rotate(-7deg);

    -moz-transform: rotate(-7deg);

    -o-transform: rotate(-7deg);

    }

    查看Demo

    淡入和倒影

    8920f54b7727f31e70ed7c634b9a07c4.png

    这个效果是相对复杂的效果,首先,设置减少图片的初始的透明度,当hover时,把透明度设置回默认值,另外会有一个图片边缘发光的效果和倒影效果(只在以Webkit为内核的浏览器中起作用)。

    如果你对倒影效果不太懂的话,可以参考这篇文章(Image Reflections with CSS)

    CSS代码

    复制代码代码如下:

    #ex5 {

    width: 700px;

    mergin: 0 auto;

    min-height: 300px;

    }

    #ex5 img {

    mergin: 25px;

    opacity: 0.8;

    border: 10px solid #eee;

    /*Transition*/

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    /*Reflection*/

    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));

    }

    #ex5 img:hover {

    opacity: 1;

    /*Reflection*/

    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

    /*Glow*/

    -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);

    -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);

    box-shadow: 0px 0px 20px rgba(255,255,255,0.8);

    }

    查看Demo

    总结

    经过测试,这些效果在以Webkit为核心的浏览器上表现最出色,Mozilla次之,IE最差,如果要使得在IE9中的效果更好,则需要其它的第三方JS库。以上的这五个纯CSS实现的hover效果,应该会给你带来一些设计上的灵感,你可以综合运用这些CSS样式,并加入一些其他的CSS来产生一些有意思的效果。如果你也有一些非常酷的CSS效果,欢迎参与讨论。

    编注

    以上的五种CSS Hover效果都应用了最新的CSS3效果,在现代的浏览器中,应用这些CSS能展现出非常漂亮的效果。值得一提的是IE9,IE9不支持transition和transform这两种效果,使得这五种效果在IE9下表现的不佳,寄希望于IE10吧。

    展开全文
  • hover在PC端的用户体验扮演着很重要的角色,那么移动web端我们又该如何增强这方面的用户体验呢?下面我简单的在移动web端模拟了下hover的效果。效果预览核心代码//按钮点击效果$(document).on("touchstart", "....
  • 回复讨论(解决方案)你可以用li:hover border-bottom:3px solid blue;background-position:bottom; //是针对背景图片的位置,不是背景颜色height: 1px;//这里的高度为什么是1px?有什么目的?width:45px;可以采用1楼的...
  • CSS的a:hover表示什么

    2021-06-27 07:11:59
    a:hover表示当鼠标选定在a标签上时a标签的样式变化。这是css伪类的使用格式。伪类(Pseudo classes)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class { property: ...
  • :link、:hover、:active和:visited的区别? :link表示鼠标点击之前,也称为原始状态 :hover表示鼠标悬停状态 :active表示鼠标点击状态 :visited表示鼠标点击之后状态 <!DOCTYPE html> <html lang="en"> ...
  • 从悬浮到移开状态时,写在hover中的transition效果是一种切换(normal->hover顺向动画过渡,hover->normal 逆向动画过渡),但是写在普通状态中的transition迅速消失,没有丝毫的delay,也就是说,从hover->normal...
  • 我试过这样.tableclass tr td:hover a{color:#fff;}什么,我试图做的是,当我将鼠标悬停在TD所以后来锚是TD内链接应该改变其颜色为以后使用元素白色..这是我如何尝试自我,但不为我工作?.GridAlternate td:hover a ...
  • 纯css实导航hover效果

    2021-06-13 02:37:21
    /* 重点 */ } .nav02 ul li:hover::before { transform:scaleX(1); /* 重点 */ } /* 线条运动方向 --------------------------------------------------*/ .nav03 { width:1200px; margin:0 auto; } .nav03 ul { ...
  • 下面是实际操作,在上一节我们展示了tab的实现,但是内容框我们想在我们没有选中功能选项的时候消失 $(".tabnav>div").bind("mouseover", function () { $(".content>div").eq($(this).index()).slideDown(1000)....
  • 制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如:$(".nav").hover(function(){ $("sub-nav").addClass("show");},function(){...
  • 如下图的灰色子菜单面板就是一个hover元素面板,它只有在我们鼠标移动到相应的主菜单选项时才会展示,鼠标离开主菜单选项后就会隐藏,所以我们在开发者工具通过左下角的捕获图标无法捕获到它。 这篇文章就给...
  • hover的延时策略hoverweb 交互里的一个重要交互动作,当鼠标指针悬停或者划过元素的上方时,会触发对应的反馈,或者展示隐藏的信息。但是在实际的设计过程hover 触发的东西并不是即时的。如图,京东频道页...
  • | XXXXXXXX | 鼠标飘过显示子菜单 - xxxxxxxx - - xxxxxxxx - - xxxxxxxxx - - ... 影响其显示的应该这个吧:#menu ul li a.rd:hover #submenu{ /*更正一下,发帖把#submenu写成.submenu了*/ visibility:visible;}
  • 如何让css hover 失效

    2021-06-18 04:25:53
    让css hover失效的原因:1、在CSS定义,“a:hover”没有被置于“a:link”和“a:visited”之后;2、在CSS定义,“a:active”没有被置于“a:hover”之后。CSS中hover失效的几个原因:在设置CSS的hover时,有时会...
  • hover

    2021-03-26 13:48:28
    利用 hover 伪类创建纯 CSS 收缩面板SVN 源码/例子:...“hover”的意思就是用户鼠标移上某个元素时,该元素会产生高...文章sp422013-12-29764浏览量css的...
  • 如何设置会让css hover失效?失效原因是什么?怎么解决?下面本篇文章给大家简单介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。在设置CSS的hover时,有时会发现hover不起作用,总结...
  • 为了在鼠标悬停在图像上时允许div或span元素出现在图像上,可以使用.image:hover overlay,为了绝对地相对于父元素定位.overlay元素,我们将所有图像尺寸的高度和宽度设置为100%,从而使父元素内联块的...
  • 这篇文章就和大家讲讲CSShover事件,CSS:hover怎么使用,以及用代码说明怎么用CSS:hover变色。需要的小伙伴,继续往下看吧。细心的小伙伴会发现,几乎每个网站都会用到hoverhover一般被应用在按钮、logo以及...
  • 请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ... IE8给HTML标签负值报错问题 当通过JS给一个HTML标签设置高宽为负值的时候,会爆出一个...
  • Web页面TabView的作用TabView是许多可视化编程环境提供的常见组件,它通过选项卡将内容分类,因此能在紧凑的空间内显示众多内容,这个特点使得它在可视化编程环境很常见.随着Web的发展,Web页面元素也开始了组件化的...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> div{ overflow: hidden;... div
  • Web中的一些选择器

    2021-09-27 08:50:42
    } hover 鼠标经过添加样式: a:hover{ font-size: 30px; } 三.伪元素选择器,例如: 1、:first-letter 给标签的第一个元素添加样式: p::first-letter{ font-size: 40px; } 2、:first-line 给标签第一行文本添加...
  • I have a simple Scene with this code:scene.getStylesheets().add("packagename/testcss.css");And my testcss.css is:.button {-fx-background-color: #...}.button:hover {-fx-background-color: #9ACD32;}W...
  • 效果演示css:hover状态改变另一个元素样式的使用.box {width: 150px;height: 150px;background-color: #069;line-height: 150px;text-align: center;margin: 20px 0;color: #FFF;}.change {font-size: 20px;color: #...
  • 实现滑动(hover)文字后出现波浪下划线效果,玩玩吧。直接上demo:html>实现滑动(hover)文字后出现波浪下划线效果.linewave{/*padding:4px0px;*/cursor:pointer;text-decoration:underline;}.linewave:hover{text-...
  •  只沿Y轴移动 借助margin来实现子盒子在父盒子的居中显示 前提:知道元素的尺寸 tranform:translate(-50%,-50%)实现盒子的居中显示 不知道元素尺寸的时候使用偏移百分比 transform:translate()对于行内元素无效...
  • hover时,亦可进一步改变该遮罩层的色彩和透明度。我们可以通过css定位和背景色实现。CSS遮罩层实现及hover状态丢失问题CSS代码:.block {position: relative;top: 100px;left: 100px;display: inline-block;width...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,129
精华内容 19,251
关键字:

web中hover