jQuery悬停从屏幕上掉下来

时间：2016-10-18 10:17:30

标签： javascript jquery

这是我目前的代码。 我需要防止悬停在页面底部的悬停框“摔倒”，同时将鼠标悬停在段落上。我设法在较小的屏幕上禁止右侧，但我不能在底部。

$(function() {
  var moveLeft = 20;
  var moveDown = 10;
  // var moveRight = 10;

  $('.hoverKartX').hover(function(e) {
    $('.hoverKart').show();
    
  }, function() {
    $('.hoverKart').hide();
  });

  $('.hoverKartX').mousemove(function(e) {
    $('.hoverKart').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    
    // preventing 'falling out to the right' on smaller screens
    if ($('.hoverKart').position()['left'] + $('.hoverKart').width() > $(window).width()) {
        $('.hoverKart').css("left", $(window).width() - $(".hoverKart").width());
    };
});

});
.hoverKart {
  position: absolute;
    width: 400px;
    height: 220px;
    border-radius: 25px;
    border: 1px solid #999;
    z-index: 1;
    display: none;
    background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hoverKart"> <!-- hidden -->
  <p>
  TEST
  </p>
</div>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>

3 个答案:

答案 0 :(得分：0)

您可以使用e中的$('.hoverKartX').mousemove(function(e) {对象来计算鼠标距窗口宽度的距离。如果距离小于.hoverKart的高度，则可以使用边缘调整其偏移量，使其保持在窗口内。

答案 1 :(得分：0)

你已经有了右边的逻辑（左/宽），所以将相同的登录应用到底部（pageY + height）：

if ((e.pageY + moveDown + $(".hoverKart").height()) 
    > ($(window).scrollTop() + $(window).height())) {
  $('.hoverKart').css("top", 
       $(window).height() - $(".hoverKart").height() + $(window).scrollTop()
  );
}

＆＃13;
＆＃13; 
$(function() {
  var moveLeft = 20;
  var moveDown = 10;
  // var moveRight = 10;

  $('.hoverKartX').hover(function(e) {
    $('.hoverKart').show();
    
  }, function() {
    $('.hoverKart').hide();
  });

  $('.hoverKartX').mousemove(function(e) {
    $('.hoverKart').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    $(".hoverKart>p").html($(this).html())
    
    // preventing 'falling out to the right' on smaller screens
    if ($('.hoverKart').position().left + $('.hoverKart').width() > $(window).width()) {
        $('.hoverKart').css("left", $(window).width() - $(".hoverKart").width() - moveLeft);
    };
    
    if ((e.pageY + moveDown + $(".hoverKart").height()) > ($(window).scrollTop() + $(window).height())) {
      $('.hoverKart').css("top", $(window).height() - $(".hoverKart").height() + $(window).scrollTop());
    }
});

});
＆＃13; 
.hoverKart {
  position: absolute;
    width: 400px;
    height: 120px;
    border-radius: 25px;
    border: 1px solid #999;
    z-index: 1;
    display: none;
    background: #fff;
}
p.hoverKartX {
  border:1px solid green;
  }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hoverKart"> <!-- hidden -->
  <p>
  TEST
  </p>
</div>
<p class="hoverKartX">
test1
</p>
<p class="hoverKartX">
test2
</p>
<p class="hoverKartX">
test3
</p>
<p class="hoverKartX">
test4
</p>
<p class="hoverKartX">
test5
</p>
<p class="hoverKartX">
test6
</p>
<p class="hoverKartX">
test7
</p>
<p class="hoverKartX">
test8
</p>
<p class="hoverKartX">
test9
</p>
<p class="hoverKartX">
testa
</p>
<p class="hoverKartX">
testb
</p>
<p class="hoverKartX">
testc
</p>
<p class="hoverKartX">
testd
</p>
<p class="hoverKartX">
teste
</p>
<p class="hoverKartX">
testf
</p>
<p class="hoverKartX">
testg
</p>
<p class="hoverKartX">
testh
</p>
<p class="hoverKartX">
testi
</p>
<p class="hoverKartX">
testj
</p>
<p class="hoverKartX">
testk
</p>
<p class="hoverKartX">
testl
</p>
<p class="hoverKartX">
testm
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

这是解决方案

$(function() {
  var moveLeft = 20;
  var moveDown = 10;
  // var moveRight = 10;

  $('.hoverKartX').hover(function(e) {
    $('.hoverKart').show();
    
  }, function() {
    $('.hoverKart').hide();
  });

  $('.hoverKartX').mousemove(function(e) {
    var offset = $( this ).offset().top,
    bodyOffset=$(document).scrollTop();
    if($( this ).offset().top+$(".hoverKart").height()+moveDown<bodyOffset+$(window).height()){
      $('.hoverKart').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    }
    else{
      $('.hoverKart').css('top', bodyOffset+$(window).height()-$(".hoverKart").height())
      .css('left', e.pageX + moveLeft);
    }
    
    // preventing 'falling out to the right' on smaller screens
    if ($('.hoverKart').position()['left'] + $('.hoverKart').width() > $(window).width()) {
        $('.hoverKart').css("left", $(window).width() - $(".hoverKart").width());
    };
});

});
.hoverKart {
  position: absolute;
    width: 400px;
    height: 220px;
    border-radius: 25px;
    border: 1px solid #999;
    z-index: 1;
    display: none;
    background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hoverKart"> <!-- hidden -->
  <p>
  TEST
  </p>
</div>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>
<p class="hoverKartX">
test
</p>

相关问题
最新问题