我有一个左侧边栏，当鼠标离开时我需要隐藏它。
此刻，当我将鼠标移开时，它会被删除。但是，当我将鼠标向右移动+100像素时，我需要将其移除，但我不想在其宽度上添加100个像素。我希望它只留在js代码中，并不反映在HTML内部。
我试着这样做：$(".group-side-context").offset().right + 100px
if($(".group-side-context").mouseover){
$(".group-side-context").mouseleave(function(){
$(this).parent().removeClass("context-sidebar-active").addClass("context-sidebar-close").removeClass("context-sidebar-close").addClass("context-sidebar");
})
};
我想你想要隐藏左侧边栏。如果是这种情况，您可以尝试使用左侧淡入淡出的组合在jQuery中隐藏/显示。
我希望以下代码可以帮助您解决问题。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
//$("div.sidenav").addEventListener("mouseleave", printPosition);
document.getElementById('mySidenav').addEventListener('click', printPosition);
function printPosition(e) {
var position = getPosition(e);
var x = position.x;
var y = position.y;
console.log(x,y);
};
function getPosition(e) {
var rect = e.target.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
return {
x,
y
}
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
$("div.sidenav").mouseleave(function () {
console.log("You've left the sidebar");
let width = $(this).width();
console.log("Width of the sidebar: " + width);
$(document).mousemove(function () {
let pos = mousePositionDocument();
if (pos.x - width >= 200) {
closeNav();
}
//console.log(pos.x, pos.y);
});
});
// Which HTML element is the target of the event
function mouseTarget(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
return targ;
}
// Mouse position relative to the document
// From http://www.quirksmode.org/js/events_properties.html
function mousePositionDocument(e) {
var posx = 0;
var posy = 0;
if (!e) {
var e = window.event;
}
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return {
x : posx,
y : posy
};
}
// Find out where an element is on the page
// From http://www.quirksmode.org/js/findpos.html
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return {
left : curleft,
top : curtop
};
}
// Mouse position relative to the element
// not working on IE7 and below
function mousePositionElement(e) {
var mousePosDoc = mousePositionDocument(e);
var target = mouseTarget(e);
var targetPos = findPos(target);
var posx = mousePosDoc.x - targetPos.left;
var posy = mousePosDoc.y - targetPos.top;
return {
x : posx,
y : posy
};
}
</script>
</body>