通过CSS限制元素位置

所以我有这个工具提示改变了mousemove事件的位置。它工作正常，但我希望当它到达右侧角落时，工具提示会隐藏起来或者抓住右侧。示例：http://jsfiddle.net/bortao/qN3RP/通过CSS限制元素位置

当然，我可以采用父元素的宽度，检查它是否更大并且限制它，但是这会使代码重载一点。

我也可以设置身体的overflow: hidden，但我不能因为有其他元素，我想滚动。

还有其他出路吗？有点像max-right。

来源

2014-04-17 ariel

意味着如果指针是在任何的4角或线有不会是工具提示？ –

要么隐藏或限制位置 – ariel

DEMO

的jQuery

var _offset; 
$(document).on("mousemove", function (e) { 
    if (!_offset) _offset = $("body").offset(); 



    var calc = e.pageX; 
    var getWidth = $('body').width() - $("#help").width(); 
    $("#help").show(); 


    if (calc > getWidth) {   
     $("#help").css({ 
      right: (e.pageX - _offset.right) + "px", 
      top: (e.pageY - _offset.top + 25) + "px" 

     }); 
    } else { 
     $("#help").css({ 
      left: (e.pageX - _offset.left + 10) + "px", 
      top: (e.pageY - _offset.top + 25) + "px", 
      right: "auto" 
     }); 
    } 


})

可以调整为每文档动态宽度
对身体body{overflow:hidden;}溢出隐藏加入这样滚动条不会影响提示的位置

希望它能帮助！

来源

2014-04-17 06:10:23

@ C-link对不起，我没有请检查更新代码是错误的，我复制你的jsfiddle代码 –

现在，这比我更好.. –

仍然我正在寻找如果（calc > getWidth）如果条件设置正确的更好的方式，如果需要:) –

您可以使用这样的事情：

var _offset; 
$(document).on("mousemove", function (e) { 
    if (!_offset) _offset = $("body").offset(); 
    $("#help").show(); 
    $("#help").css({ 

     left: (e.pageX - _offset.left) > 400 ? '400px' : (e.pageX - _offset.left + 10) + "px" , 
     top: (e.pageY - _offset.top + 25) > 400 ? '400px' : (e.pageY - _offset.top + 25) + "px" 
    }); 
})

增加/ 400的价值降低到所需的值。

fiddle

来源

2014-04-17 06:07:10

喜U可以使用下面的代码它工作正常

<html> 
<head> 
<script src="jquery-1.10.2.js"></script> 
<style> 
#help { 
    white-space: nowrap; 
    position: absolute; 
    background: yellow; 
    color: #111; 
    padding: 4px 4px 2px 4px; 
} 

</style> 
<script> 
var _offset; 
$(document).ready(function(){ 
$(document).on("mousemove", function (e) { 
    if (!_offset) _offset = $("body").offset(); 
    $("#help").show(); 
    $("#help").css({ 
     left: (e.pageX - _offset.left + 10) + "px", 
     top: (e.pageY - _offset.top + 25) + "px" 
    }); 


    if((e.pageX - _offset.left + 10)>(window.screen.availWidth-50)) 
    { 
     //you can change the position or hide 
      $("#help").css({ 
      left: (e.pageX - _offset.left - 120) + "px", 
      top: (e.pageY - _offset.top + 25) + "px" 
     }); 
      //$("#help").hide(); 
    } 
    else 
    { 

     $("#help").show(); 
    } 

}); 
}); 
</script> 
</head> 
<body> 
<div id="help">This is some help</div> 
</body> 
</html>

来源

2014-04-17 06:10:52 pareshm

通过CSS限制元素位置

回答

相关问题