在锚上悬停时出现的CSS div；在div上悬停时使其可见

我有一个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>

#soldoutinfo a{
填充物：4px2px；
字体大小：10px；
}
#soldoutinfo、.soldout{
显示：内联；
}
#soldoutinfo a{
颜色：#cc0000；
}
#soldoutinfo a:访问{
颜色：#cc0000；
}
#soldoutinfo+div{
显示：无；
宽度：0；
身高：0；
位置：绝对位置；
}
#soldoutinfo:hover+div{
显示：块；
高度：60px；
宽度：250px；
背景：#ffffff；
盒影：0 0 4px#8888888；
位置：绝对位置；
填充：8px；
顶部：19px；
左：12px；
z指数：1000；
}
#soldoutinfo+divp{
字体大小：12px；
}

我们会看看我们的商店是否有存货可以运送给你们。

这里有一个接近点：

当您将鼠标悬停在

？

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

当他离开时，toShow

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

---

我在这把小提琴里没有看到JS代码，我不知道为什么。但解决方法是使用

setTimeout（）

在此函数中，您可以指定鼠标悬停后应隐藏框的时间段。您还可以添加到

hide（）

param'slow'

---

您也可以使用ready解决方案，即

问题在于悬停效果在锚定之后的元素上。因此，当你离开锚，你的悬停效果将结束

您可以这样修复它，尽管它不是最干净的解决方案： 使用

span

编辑您的小提琴：

看看这是否适合你。基本上我是这样做的：

使隐藏的div位于必须悬停才能显示的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;
}

我们将查看我们的商店是否有库存可供发送给您

#soldoutinfo a{
填充物：4px2px；
字体大小：10px；
}
#soldoutinfo、.soldout{
显示：内联；
位置：相对位置；
}
#soldoutinfo a{
颜色：#cc0000；
}
#soldoutinfo a:访问{
颜色：#cc0000；
}
#soldoutinfo div{
显示：无；
宽度：0；
身高：0；
位置：绝对位置；
}
#soldoutinfo:悬停分区，
#soldoutinfo分区：悬停{
显示：块；
高度：60px；
宽度：250px；
背景：#ffffff；
盒影：0 0 4px#8888888；
位置：绝对位置；
填充：8px；
顶部：3px；
左：3px；
z指数：1000；
}
#soldoutinfo+divp{
字体大小：12px；
}

---

用jquery测试它（如果他/她将鼠标悬停在？样式应该是display:show end如果他/她离开这个div，样式应该是display:none或hide。我不认为这只适用于css。哦，好吧。很遗憾，我对jquery一点也不擅长，但我会查看其他帖子或其他东西，看看我是否能找到它。修复这个评论，请纠正我的缺点。我想我可以在评论中使用相同的内容

#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;
}

<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;
}