0

我有一个 div，当我将鼠标悬停在它之前的链接上时，我想弹出它。悬停效果很好，但是 div 中有一个链接，我希望人们能够点击它，但是当我尝试访问它时它会消失。

这是jsfiddle

我想在这里只使用 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>
4

4 回答 4

1

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

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

  1. 使隐藏的 div 位于必须将鼠标悬停在其上才能显示的 div 内。
  2. 使父 div 的位置相对

  3. 使显示的 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;
}
于 2013-07-18T06:26:03.813 回答
1

问题是悬停效果在锚点之后的元素上。所以当你离开锚点时，你的悬停效果就会结束。

你可以像这样修复它，虽然它不是最干净的解决方案：将你的工具提示设置在你的锚内，使用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 演示

于 2013-07-18T06:21:08.917 回答
0

这里有一个方法点：

当您将鼠标悬停在?

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

当他离开#toShow

$('#toShow').mouseout(function() {
   $('#toShow').hide();
});
于 2013-07-18T06:13:26.983 回答
0

我在这个小提琴中没有看到 JS 代码，我不知道为什么。但是对您的解决方案是setTimeout();在此功能中使用您可以指定在悬停后的多长时间后该框应该被隐藏。您还可以添加到hide()参数“慢”。

您还可以使用现成的解决方案，即Jquery UI ToolTip

于 2013-07-18T06:17:23.313 回答