2014-11-08 74 views
20

我试图做一个悬停卡与css。我有一个关于页面位置的问题。CSS悬停卡定位

我已经创建了这个DEMO从codepen.io页面。所以,如果你在演示页面的底部,那么你会看到泡泡div显示出来。

我该怎么做才能在页面下方的三角形底部显示.bubbleenter image description here

.container{ 
    width:400px; 
    height:400px; 
    margin:0px auto; 
    margin-top:50px; 
} 
.bubble 
{ 
position: absolute; 
width: 250px; 
height: 120px; 
padding: 0px; 
background: #000; 
-webkit-border-radius: 2px; 
-moz-border-radius: 2px; 
border-radius: 2px; 
    display:none; 
} 

.bubble:after 
{ 
content: ''; 
position: absolute; 
border-style: solid; 
border-width: 0 15px 15px; 
border-color: #000 transparent; 
display: block; 
width: 0; 
z-index: 1; 
top: -15px; 
left: 194px; 
} 
.hub:hover .bubble{ 
    display:block; 
} 
.wrp{ 
    width:300px; 
    height:68px; 
} 
+3

我可能是错的,但我认为你将需要JavaScript来检查边界 – Timmerz 2014-11-08 21:50:16

+1

@Timmerz你是对的。但我找不到示例应用程序。 – innovation 2014-11-08 21:52:32

+0

你使用什么浏览器?因为在FF最新版本中,IT运行良好。尝试你的DEMO在整个页面:http://codepen.io/shadowman86/full/mCIkt – dippas 2014-11-08 21:57:14

回答

10

编辑

我已经作出了jQuery插件,解决了这一问题,重新定位提示留在里面的窗口,简单&响应。你可以看到它在这里的行动tipso

我叉你codepen并重新整理on codepen

我想这是你在找什么:)

$('.hub').on({ 
    mouseenter: function() { 
    $(this).addClass('zIndex'); 

    var top, left, 
     toolTipWidth = 250, 
     toolTipHeight = 120, 
     arrowHeight = 15, 
     elementHeight = $(this).height(), 
     elementWidth = $(this).width(), 
     documentHeight = $(window).height(), 
     bounding = $(this)[0].getBoundingClientRect(), 
     topHub = bounding.top; 


    if (topHub < topHub + toolTipHeight && topHub + toolTipHeight + arrowHeight + elementHeight <= documentHeight) { 

     $('.bubble').addClass('top'); 
     top = elementHeight + arrowHeight; 
     left = -(elementWidth/2); 

    } 

    if (topHub + toolTipHeight + arrowHeight + elementHeight >= documentHeight) { 
     $('.bubble').addClass('bottom'); 
     top = -toolTipHeight - arrowHeight; 
     left = -(elementWidth/2); 
    } 


    $('.bubble').css({ 
     'top': top, 
     'left': left 
    }); 
    }, 
    mouseleave: function() { 
    $('.bubble').removeClass('top bottom'); 
    $(this).removeClass('zIndex'); 
    } 
}); 
+0

是否可以添加“时间”悬停。就像当你将鼠标悬停在div上一样,然后在几秒后打开'.bubble'? – innovation 2014-11-11 15:44:31

+1

在这里你是http://codepen.io/anon/pen/emOoEy只需设置时间变量:) – 2014-11-11 16:03:01

4

我发现下面的方式解决。

工作DEMO但我不能使它与window。如果任何人都可以用窗口做到这一点请你回答我...

$(document).ready(function() { 
     $('.hub').mouseover(function() { 
      var elementHeight = $(this).height(); 
      var offsetWidth = -250; 
      var offsetHeight = 25; 
      var toolTipWidth = $(".bubble").width(); 
      var toolTipHeight = $(".bubble").height(); 
      var documentWidth = $(document).width(); 
      var documentHeight = $(document).height(); 
      var top = $(this).offset().top; 

      if (top + toolTipHeight > documentHeight) {     
       top = documentHeight - toolTipHeight - offsetHeight - (2 * elementHeight); 
      } 
      var left = $(this).offset().left + offsetWidth; 
      if (left + toolTipWidth > documentWidth) {      
       left = documentWidth - toolTipWidth - (2 * offsetWidth); 
      }      
      $('.bubble').css({ 'top': top, 'left': left }); 
     }); 
    }); 
+2

如果您已经在使用jQuery - 为什么不采取现成的解决方案?有大量的jQuery插件。例如。 http://www.paulund.co.uk/using-social-media-hovercard-jquery-plugin – Kiril 2014-11-11 10:05:28