我想将 #tooltip-span
放在指针的左侧,当指针悬停在右侧时,然后再次自动放置 #tooltip-span
以指针的右边...这是我的简单代码...
var tooltipSpan = document.getElementById('tooltip-span');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
};
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
display:none;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
z-index: 9999;
}
<a class="tooltip" href="http://www.google.com/">
<h1 style="text-align: center; background: red;">hover me</h1>
<span id="tooltip-span">
<div style="width: 400px; height: 400px; background: blue;"> <p style="text-align:justify; color: white;">content content content content
content content content content content content content content content content content
content content content content content content content content content content content </p></div>
</span>
</a>
谢谢..
最佳答案
var tooltipSpan = document.getElementById('tooltip-span');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
if(x>(window.innerWidth/2))
{
x-=420;
}
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
};
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
display:none;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
z-index: 9999;
}
<a class="tooltip" href="http://www.google.com/">
<h1 style="text-align: center; background: red;">hover me</h1>
<span id="tooltip-span">
<div style="width: 400px; height: 400px; background: blue;"> <p style="text-align:justify; color: white;">content content content content
content content content content content content content content content content content
content content content content content content content content content content content </p></div>
</span>
</a>
试试这个(使用 jquery)
替换
$(window).width()
通过
window.innerWidth
如果你只想使用 JS。
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
if(x>$((window).width()/2))
{
x-=420;
}
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
};
关于javascript - 当它悬停在页面右侧时,将工具提示跨度重新对齐到左侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34876831/