:hover

:hover CSS伪类适用于用户使用指示设备虚指一个元素（没有激活它）的情况。这个样式会被任何与链接相关的伪类重写，像:link, :visited, 和 :active等。为了确保生效，:hover规则需要放在:link和:visited规则之后，但是在:active规则之前，按照LVHA的循顺序声明:link－:visited－:hover－:active。

:hover伪类可以任何伪元素上使用。

用户的可视客户端比如Firefox, Internet Explorer, Safari, Opera or Chrome, 会在光标（鼠标指针）悬停在元素上时提供关联的样式。

注意: 在触摸屏上 :hover 有问题，基本不可用。不同的浏览器上:hover 伪类表现不同。可能从不会触发；或者在触摸某元素后触发了一小会儿；或者总是触发即使用户不在触摸了，直到用户触摸别的元素。触摸屏非常普遍，所以网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。

使用:hover 伪类可以创建复杂的层叠机制。一个常见用途，比如，创建一个纯CSS的下拉按钮（不使用JavaScript）。本质是创建如下的CSS：

div.menu-bar ul ul {display: none;
}div.menu-bar li:hover > ul {display: block;
}

HTML内容如下:

<div class="menu-bar"><ul><li><a href="example.html">Menu</a><ul><li><a href="example.html">Link</a></li><li><a class="menu-nav" href="example.html">Submenu</a><ul><li><a class="menu-nav" href="example.html">Submenu</a><ul><li><a href="example.html">Link</a></li><li><a href="example.html">Link</a></li><li><a href="example.html">Link</a></li><li><a href="example.html">Link</a></li></ul></li><li><a href="example.html">Link</a></li></ul></li></ul></li></ul>
</div>

在 CSS-based dropdown menu example 看结果.

CSS :hover的作用相关推荐

CSS hover如何作用在伪元素before上
使用方法如下: &::before {content: '';position: absolute;bottom: 0;width: 100%;border-bottom: 1px solid ...
html中hover的作用,hover在css中的作用是什么
hover在css中的作用是什么发布时间:2020-12-07 10:26:29 来源:亿速云阅读:143 作者:小新这篇文章给大家分享的是有关hover在css中的作用是什么的内容.小编觉得挺 ...
html中hover无法触发,如何让css hover 失效
让css hover失效的原因:1.在CSS定义中,"a:hover"没有被置于"a:link"和"a:visited"之后:2.在CSS定 ...
ie6 css :hover 和 select遮挡问题、和z-index失效问题
为什么80%的码农都做不了架构师?>>> 一.hover问题 css :hover伪类失效问题, ①直接写方法: ②使用selectivizr.js; 二.select遮挡问题 ...
html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
在工作中为了使页面更具有吸引力,前端开发人员经常会在页面中加上鼠标移入和移出的效果.鼠标移入移出的设置,一般有两种方法,一种是单纯用CSS中的hover伪类,另一种可以用JS 中的DOM事件,即onm ...
[css] 说说你对字母“X“在CSS中有什么作用？
[css] 说说你对字母"X"在CSS中有什么作用? 可以用作关闭按钮叉叉X的底部与文本对齐的基线位置相同个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
html按钮突出效果,这10个按钮，把 CSS HOVER 的创意发挥到极致了
这10个按钮,把 CSS HOVER 的创意发挥到极致了 7月 19, 2017 评论 Sponsor CSS hover 样式很简单,但是想创造出有意思.实用.有创意性的特效是很考验设计师的创意能力 ...
CSS:hover伪类使用
CSS:hover伪类使用 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Adobe Dreamwe ...
css:hover改变另一个元素的样式
css:hover状态改变另一个元素样式的使用效果演示情景一:两个是兄弟元素情景二:两个是父子元素情景二:两个是兄弟元素,改变的是一个兄弟元素的子元素附加代码: <!DOCTYPE h ...

CSS :hover的作用

:hover

CSS :hover的作用相关推荐

最新文章

热门文章