hover的用法

引言

选择鼠标指针浮动在其上的元素, 并设置其样式:

a:hover {
    background-color: yellow;
}

定义和用法

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

:hover 选择器可用于所有元素, 不只是链接.
:link 选择器设置指向未被访问页面的链接的样
:visited 选择器用于设置指向已被访问的页面的链接
:active 选择器用于活动链接.

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

例子 1

选择未访问, 已访问, 悬浮和活动链接, 并设置它们的样式:

a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:red;}
a:active {color:yellow;}

例子 2

为链接设置不同的样式:

a.ex1:hover, a.ex1:active {color:red;}
a.ex2:hover, a.ex2:active {font-size:150%;}

实验

我们分别进行三个实验实例.

1, 实验实例描述

第一个实例: 对 img 标签赋予 hover(即 img:hover{...} ) 样式, 鼠标经过时图片边大, 出现边框与 padding 距离;
第二个实例: 对 li 标签赋予 hover(即 li:hover{...} ) 样式, 鼠标经过时候 ul li 标签出现黑色边框;
第三个实例: 对自己随便命名 css 样式选择名称赋予 hover(即 .abc:hover{...} ), 鼠标经过此 abc 对象 DIV 盒子时候, 对象内文字变为红色.

2, 此三个小实验实例 CSS 代码如下:

body {
    behavior:url("csshover.htc");
}   /* css 注释: 别忘记 csshover.htc, 使用时候注意路径 */

img { 
    width:165px;
    height:60px;
    background:#090;
}   /* 原本图片宽度和高度背景颜色 */

img:hover{
    width:200px;
    height:200px;
    padding:3px;
    border:2px
    solid #00F;
    cursor:pointer
}
/* hover 鼠标经过赋予让图片变宽 高,
   设置 padding 和 2px 蓝色边框,
   css cursor 为鼠标指针样式 */

li:hover{
    border:1px solid #000
}   /* li 列表标签鼠标经过出现黑色边框 */

/*伪类也可以用于类的后面*/
.abc:hover{
    color:#F00
}   /* 对象.abc 鼠标经过其内容 css 字体颜色变红色 */

3, 三实验对应 HTML 源代码:

<!-- html 注释:1 鼠标经过图片变大 -->
<img src="divcss5-logo-2013.gif" alt="DIVCSS5 LOGO" />

<!-- 2 鼠标经过 li 出现边框 -->
<ul>
    <li> 对 li 设置 hover 样式, 鼠标经过加 CSS 边框</li>
</ul>

<!-- 3 鼠标经过 abc 盒子内文字变为红色 -->
<div class="abc"> 对.abc:hover, 鼠标经过时候文字颜色变红</div>

其他

受到 CSS 选择器的 parse 和执行机制影响, 至少在 CSS3 选择器的框架内, 是不可能"通过后面的元素选择前面的元素"或者"通过子元素选择父元素"的, 反之,"通过前面的元素选择后面的元素"和"通过父元素选择子元素"都是很常用的. 如果你可以调整下 DOM 结构, 让 div2 在 div1 的前面, 那么可以用. div2:hover+.div1 来选中它. 然后用其他奇技淫巧来实现布局.

而要使用 hover 这个属性来操作两个 div, 也就是鼠标悬停在 div2 上的时候, div1 发生变化, 那么这两个 div 必须是包含的关系才可以. 也就是说 div2 要嵌套在 div1 里面才可以, 并列关系使用 hover 实现不了.

div1 和 div2 是并列的关系. 使用使用 hover 是其中一个改变样式是不行的. 需要父子关系的元素才可以, 比如你这个案例中的 body 和 div1 与 div2. 鼠标放在 body 上使 div1 和 div2 改变样式效果是可以的.

如果不考虑兼容性, 什么都不考虑, 你用 CSS 做没人反对. 在项目里劝你还是老实用 JS, 用 JQ 都比 CSS 好. 不是所有浏览器都兼容伪类元素, 当然大部分还是兼容的.