下面是我的代码结构:
html
<div id="my-cart">
<span id="my-cart-in">
<i class="img-icon cart"></i>我的购物车<i class="corner-mark">5</i>
</span>
<ul id="my-cart-list-mini">
<li></li>
</ul>
</div>
css
#my-cart #my-cart-list-mini{
display: none;
}
#my-cart:hover #my-cart-list-mini{
display: block;
}
现在情况是浏览器根本不响应hover,而且我用调试工具设置hover也没有任何效果,真是奇了怪了!
分割线
问题已经解决了,可是不是很明白,我的#my-cart外面还有一层DIV如下:
<div id="header-container">
<div id="my-cart">
<span id="my-cart-in">
<i class="img-icon cart"></i>我的购物车<i class="corner-mark">5</i>
</span>
<ul id="my-cart-list-mini">
<li></li>
</ul>
</div>
</div>
按上面的思路,只有把hover加在#header-container上才能有效,加在#my-cart上就无效,请问这是为什么?
前排,表示根本没看懂你在写什么
看看my-cart盒模型?
是不是写了overflow:hidden;把hover出来的层隐藏掉了呢?
有效果呀,怎么没效果?我这试过了,可以用的,你把li中随便写上点内容试试