你给的demo火狐和chrome都测试正常，如果是低版本ie下出的问题很可能是ie对伪类的支持性不太好，可以避开伪类换个写法，子容器的div标签换成li，>去掉就行
ul li:hover{color:#fff} //表示选中li的时候颜色是白色ul hover:li{color:#fff}//不存在这种写法，错误的。
ul:hover li{color:#fff}//选中ul的时候，他里面的li颜色是白色
你要表达的是不是1和3的不同点？
有问题再追问把。希望能帮到你，有用就采纳！
根据你的样式来看，你的页面布局是不是这样的<div class="box"><span>购物车</span><div class='detail'>购物相关信息</div></div>，如果是的话，那我觉得你hover用错了。应该是.box:hover .detail{}，也就是说，你写的.box:hover.detail{}hover后面少了一个空格。
