gpt4 book ai didi

jquery - 通过 CSS 限制元素位置

转载 作者:行者123 更新时间:2023-11-28 12:15:35 25 4
gpt4 key购买 nike

所以我有这个工具提示可以改变 mousemove 事件的位置。它工作正常,但我希望当它到达右 Angular 时,工具提示要么被隐藏,要么捕捉到右侧。示例:http://jsfiddle.net/bortao/qN3RP/

当然我可以获取父元素的宽度,检查它是否更大并限制它,但这会使代码有点过载。

我也可以设置 body 的 overflow: hidden,但我不能,因为我想滚动其他元素。

还有别的出路吗?类似于 max-right

最佳答案

您好,您可以使用以下代码它工作正常

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

关于jquery - 通过 CSS 限制元素位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23125546/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com