问题
I would like to create a small bar in the left side of the browser window which tracks the mouse Y-position and follows the mouse. So far, no problems.
But now I would like to stop the the div from offsetting when the mouse is hovered over the div to make it also possible to click on the content the div just revealed.
I've made a fiddle to make myself clear
http://jsfiddle.net/UXWp6/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).bind('mousemove', function(e){
$('#blokje').offset({top: e.pageY-100}); });
</script>
<style>
#blokje{width:200px; height:200px; background:white; position:relative; left:-180px; color:black; }
#blokje:hover{left:0;}
#blokje #tit{position:absolute; width:30px; height:200px; background:black; right:0; top:0; }
</style>
</head>
<body>
<div id="blokje">
<div id="tit"> </div>
<p><a href="#">A link</a><br /> This is the content where I would like to have my content clickable like that link on top </p>
</div>
</body>
</html>
回答1:
Instead of actually binding and unbinding the events over and over again. I would probably just stop the propagation so the document never sees it happen.
$(function(){
$(document).bind('mousemove', function(e){
$('#blokje').offset({top: e.pageY-100});
});
$('#blokje').bind('mousemove', function(e){
e.stopPropagation();
});
});
Fiddler
来源：https://stackoverflow.com/questions/11811586/stop-changing-offset-on-hover-jquery