css的hover用法

html-css04

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

按照你这样的布局是要配合js才可以的,还有你的html代码有点问题,不符合规范,一般都是<li>包含<a>的,你为什么不从html上解决呢?

像这样

<ul class="no_style_ul">

<li class="index"><a href="">首页</a></li>

</ul>

然后css像下面这样

<style>

.no_style_ul li.index{ float:leftwidth:宽height:高background:url(你的那张ico背景图) left center no-repeatpadding-left:你那张ico的宽+5px}

.no_style_ul li.index:hover{background:url(变了颜色的ico背景图) left center no-repeat}

</style>

这样就解决了

希望对你有所帮助!