错误例子:
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>
这样就解决了
希望对你有所帮助!