Stop changing offset on hover jQuery

2019-08-31 00:44发布

问题:

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">&nbsp</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