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

Question

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

参见图片:http://postimg.org/image/d8lhmhoh7/

有一个链接是有"login"的，当用户鼠标悬停在一个矩形弹出框上时，会出现带有三个链接或带有一个链接的图片。当用户将鼠标移出时，弹出窗口将消失。

Answer 1

也只能在CSS中实现。做到以下几点:创建嵌套div，隐藏里面的div (display:none)，这个div应该包含三个链接。然后在CSS中使用:hover伪选择器，当用户鼠标悬停在父div上时，通过将显示设置为block (display:block)，使隐藏的div可见。

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

Answer 2

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

这个问题以一种我最终基于我的过程的方式解决了它，尽管在我的情况下我最终使用了一个类而不是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

—try this

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