Question

我正在一个网站上工作，所以我在顶部菜单中对购物车链接给出了CSS div hover个效果...

一旦您在购物车中添加一个产品，而不是hover它在购物车链接的顶部菜单中hover div无法正常工作，当我将鼠标悬停时它突然消失并且没有得到确切的信息错误....

所以请试着找出错误.....

我正在谈论这个错误，一旦你看到附加图像... enter image description here

以下是网站链接： - http://www.aurikjewels.com/index.php/

先谢谢

Answer 1

悬停未按预期工作，因为您移出header-items因为以下属性而消失;

.block-cart-header #header-items
{
    padding:15px;
}

如果您提供padding-top:0px;并添加margin-top: -10px，则不会发生此问题。

Answer 2

将margin-top: -10px;添加到header-items div

Answer 3

只需将购物车移动到按钮显示中即可：

 <span class="button-show"><a href="http://www.aurikjewels.com/index.php/checkout/cart/?___SID=U">Shopping Cart</a>
    -   <div id="header-items">

             All cart informations                     
        </div><span class="price">Rs. 37,212.00</span>                     
 </span>

为按钮显示添加高度：

.block-cart-header .button-show {
background: url(../images/shopping_bag.png) no-repeat right center;
color: #FFFFFF;
float: right;
font-size: 12px;
margin: 5px 14px 0 0;
padding-right: 20px;
position: relative;
height: 24px;
display: inline-block;
}

这对我有用！

Answer 4

问题是.button-show没有足够的高度来保持事件悬停一旦光标移动到.button-show和#header-items之间的间隙，悬停就会消失。和#header-items淡出。

要解决这个问题，你必须做一些事情，比如

将padding-bottom: 10px;添加到class="button-show"作为inline style
该行看起来像<span class="button-show" style="padding-bottom: 10px;">
将.block-cart-header .button-show的背景添加为url(../images/shopping_bag.png) no-repeat right 1px

Answer 5

大家好我已经解决了这个问题......

我删除了

.block-cart-header .actions { display:none !important; }

现在它的工作正常......

感谢所有人的大力支持......： - ）

CSS悬停div无法正常工作

5 个答案: