css的hover用法

html-css010

css的hover用法,第1张

元素添加hover伪类选择器时候一定要 紧贴 这hover, 不能有空格 ,有空格的话表示给该元素的所有子元素设置里hover样式。

错误例子:

ul :hover{} //ul的所有子元素设置了hover样式

正确例子:

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

ul:hover .one{// 子元素写在hover后面空格隔开

              transform:rotateY(90deg)

          }

 ul:hover .two{

              transform:rotateY(0deg)

          }

ul:hover .thr{

              transform:rotateY(360deg)

          }

仅可以给自身的子元素设置样式 ,给其他元素子元素设置无效

接着上个例子举例子:

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

给兄弟元素设置:

ul:hover+.one

如果是写在.。hover是选择符, 意思为, 类名为hover的标签。如: .hover{color:#fff} ,一般不建议以这样的方式命名,

而 :hover 是指 伪类,

如A标签的伪类,a:hover{color:#999}表示,鼠标滑过 超链接的时候,字体颜色变化。