hover定义

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

hover用法

控制自身样式

<div class="aa"></div>
<style>aa:hover { background-color:yellow;}
</style>

父元素控制子元素

<div class="parent"><div class="child"></div>
</div><style>parent:hover child{//鼠标经过父元素时，改变子元素背景色background:#000;}
</style>

控制同级元素样式

<div class="doc1"></div>
<div class="doc2"></div><style>doc1:hover +doc2 {//鼠标经过doc1元素时，改变doc2元素背景色//注意：不能通过doc2元素改变doc1元素background:#000;}
</style>

hover问题

active，visited，hover，link之间的生效顺序的关系。
使用了中文的标识符。
在设置:hover前，增加来空格，导致只对其后代有效。
存在hover的元素的行内式样式，效果不显示。
控制同级元素样式时，hover只对相邻元素有效（下一个紧挨着的元素，上一个元素不能被控制）。

后记

借鉴自：

css之伪类hover改变自身、子元素、其他元素的样式_Boale_H的博客-CSDN博客

CSS:hover常见问题及用法相关推荐

CSS :hover选择器
最近的工作内容是东家的一个在线网站,会用到大量CSS做页面的样式,刚好复习下CSS基础,在这里记录一下,希望也能帮助到前端er. 在实践中,对于页面动效,总体思路就是能用css解决的就绝不写js,这样 ...
js修改css hover样式,JS实现css hover操作的方法示例
JS实现css hover操作的方法示例发布时间:2020-09-01 14:46:32 来源:脚本之家阅读:118 作者:谢玉胜本文实例讲述了JS实现css hover操作的方法.分享给大家供 ...
css中hideFocus的用法
css中hideFocus的用法简单说:hideFocus是对超链接外虚线框的设定! hideFocus即隐藏聚焦,具有使对象聚焦失效的功能,其功能相当于: onFocus="this.b ...
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: hover选择器的使用
用法1: 这个表示的是:当鼠标悬浮在a这个样式上的时候,a的背景颜色设置为黄色 a:hover { background-color:yellow; ...
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定义

hover用法

hover问题

后记

CSS:hover常见问题及用法相关推荐

最新文章

热门文章