如何创建鼠标悬停或悬停，这将触发弹出一个带有三个链接的 div？答案

【问题标题】：How to create a mouse over or hover, which will trigger a pop up a div with three links?如何创建鼠标悬停或悬停，这将触发弹出一个带有三个链接的 div？
【发布时间】：2013-05-08 15:44:47
【问题描述】：

如何创建一个鼠标悬停或悬停，这会触发一个带有三个链接的弹出div？

查看图片：http://postimg.org/image/d8lhmhoh7/

有一个链接“登录”，当用户将鼠标悬停在一个矩形弹出框上时会出现三个链接或带有链接的图像。当用户鼠标移出时，弹出窗口将消失。

【问题讨论】：

这些解决方案对您有帮助吗？

标签： jquery popup hover mouseover mousehover

【解决方案1】：

您也只能在 CSS 中实现它。请执行下列操作：创建嵌套的 div，隐藏里面的 div (display:none)，这个应该包含三个链接。然后在 CSS 中使用 :hover 伪选择器，并通过在用户将鼠标悬停在父 div 上时将显示设置为阻止 (display:block) 来使隐藏的 div 可见。

这是非常高级的，这看起来类似于创建下拉菜单，因此您可以阅读有关如何执行此操作的信息。

【讨论】：

【解决方案2】：

我最近使用纯 CSS 进行了此操作，并添加了一个脚本以确保 iOS 兼容性。

This question 以一种我最终基于我的流程的方式解决了这个问题，尽管在我的情况下我最终选择了一个类而不是一个 id，但它也同样有效。

.container > div {
    display: none
}
.container > div:first-child {
    display: block
}
.container:hover > div {
    display: block
}

为了兼容 iOS，我使用了这个：

<script type='text/javascript'>

$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".hoverclasshere div").click(function(){
// Update class to point at the head of the list
});

}

});

</script>

如果您还没有在您的网站上使用 jQuery，则必须确保在使用此脚本之前包含它。

【讨论】：

【解决方案3】：

--试试这个

  .tools-Tips
   {
display:none;
height: 20px;
padding: 10px;
position: fixed;
background-color: #F2F2F2;
left: 70px;
font-family: arial, Helvetica, sans-serif;
font-size: 14px;
color: #003366;
border-radius: 9px 9px 9px 9px;
font-weight: bold;
box-shadow: 0 5px 11px -2px #6F9FAB;
width:auto;
  }

   <div id="myElement" >mouse here</div>
   <div id='toolsTips' class='tools-Tips'></div>

 <script type="text/javascript">

 $('#myElement').mousemove(function (e) {
    var ht = '<div><a href="#">links</a>write what you want<div>';
    $('#toolsTips').html(ht).show().css({ 'top': (e.clientY + 'px'), 'left': ((e.clientX + 20) + 'px') });

 }).mouseleave(function () {
    $('#toolsTips').hide();
 });

 </script>

【讨论】：