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

Question

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

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

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

Answer 1

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

这是非常高级的，这看起来类似于创建下拉菜单，所以你可以阅读如何做。

Answer 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，那么在使用此脚本之前，您必须确保包含它。

Answer 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>