Question

当我将鼠标悬停在它之前的链接上时，我想要弹出一个div。悬停效果很好，但div内部有一个链接，我希望人们可以点击它，但当我尝试去它时它会消失。

我试图在这里使用CSS，但如果我需要任何jquery或任何东西，那么很酷。

#soldoutinfo a {                                        
    padding:4px 2px;
    font-size:10px;
}

#soldoutinfo, .soldout {                                        
    display:inline;
}

#soldoutinfo a {                                    
    color:#cc0000;
}

#soldoutinfo a:visited {                            
    color:#cc0000;
}

#soldoutinfo + div {                                    
    display:none;
    width:0;
    height:0;
    position:absolute;
}

#soldoutinfo:hover + div {                          
    display:block;
    height:60px;
    width:250px;
    background:#ffffff;
    box-shadow: 0 0 4px #888888;
    position: absolute;
    padding: 8px;
    top: 19px;
    left:12px;
    z-index:1000;
}

#soldoutinfo + div p {                          
    font-size:12px;
}

<p id="soldoutinfo">
    <sup><a>?</a></sup>
</p>
<div>
<p>Hope is not lost! <a href="#">Send us a message</a> and we will see if our stores have any in stock to ship to you.
</p>
</div>

Answer 1

编辑你的小提琴： http://jsfiddle.net/s8QWY/6/

看看这是否适合您。基本上我所做的就是：

让隐藏的div位于你必须悬停的div内以使其显示。
设置父div相对的位置

使显示的div的位置超过悬停元素的位置，以便当您将鼠标悬停在div本身上时div仍会显示。

<div id="soldoutinfo"><sup><a>?</a><div><p>Hope is not lost! <a href="#">Send us a message</a> and we will see if our stores have any in stock to ship to you.</p></div></sup></div>


#soldoutinfo a {                                        
    padding:4px 2px;
    font-size:10px;
}

#soldoutinfo, .soldout {                                        
    display:inline;
    position: relative;
}

#soldoutinfo a {                                    
    color:#cc0000;
}

#soldoutinfo a:visited {                            
    color:#cc0000;
}

#soldoutinfo div {                                  
    display:none;
    width:0;
    height:0;
    position:absolute;
}

#soldoutinfo:hover div,
#soldoutinfo div:hover {                            
    display:block;
    height:60px;
    width:250px;
    background:#ffffff;
    box-shadow: 0 0 4px #888888;
    position: absolute;
    padding: 8px;
    top: 3px;
    left:3px;
    z-index:1000;
}

#soldoutinfo + div p {                          
    font-size:12px;
}

Answer 2

问题是悬停效果是锚点后的元素。因此，当您离开锚点时，您的悬停效果将结束。

你可以像这样修复它，虽然它不是最干净的解决方案：使用span在工具提示中设置工具提示

<p id="soldoutinfo">
    <sup><a>?</a></sup>
    <span>Hope is not lost! <a href="#">Send us a message</a> and we will see if our stores have any in stock to ship to you.</span>
</p>

#soldoutinfo span {                                 
    display:none;
    width:0;
    height:0;
    position:absolute;
}

#soldoutinfo:hover span {                           
    display:block;
    height:60px;
    width:250px;
    background:#ffffff;
    box-shadow: 0 0 4px #888888;
    position: absolute;
    padding: 8px;
    top: 19px;
    left:12px;
    z-index:1000;
}

<强> JSFiddle DEMO

Answer 3

这是一个接近点：

当您将鼠标悬停在?

时

$("#id").hover(function(){
   $(this).find("#toShow").show();
}

当他离开#toShow

时

$('#toShow').mouseout(function() {
   $('#toShow').hide();
});

Answer 4

我看到这个小提琴中没有JS代码，我不知道为什么。但解决方法是在此功能中使用setTimeout();，您可以在悬停后的一段时间后指定隐藏框。您还可以添加到hide() param'llow'。

您也可以使用Jquery UI ToolTip

的现成解决方案

悬停在锚点时出现的CSS div;将鼠标悬停在div上时可见

4 个答案: