0

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

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

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

4

3 回答 3

0

我最近使用纯 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，你必须确保在使用这个脚本之前包含它。

于 2013-05-08T16:04:10.167 回答
0

- 尝试这个

  .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>
于 2013-05-08T16:04:57.350 回答
0

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

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

于 2013-05-08T15:56:23.377 回答