停止更改悬停jQuery上的偏移量 [英] Stop changing offset on hover jQuery

查看:107
本文介绍了停止更改悬停jQuery上的偏移量的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在浏览器窗口的左侧创建一个小栏,用于跟踪鼠标的Y位置并跟随鼠标。到目前为止,没有任何问题。



但是现在我想停止div的抵消,当鼠标悬停在div上时,也可以点击刚刚透露的内容。


我已经做了一个小提示,让自己清楚



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;高度:200像素;背景:白色;位置:相对;左:-180px;颜色:黑色; }
#blokje:hover {left:0;}
#blokje #tit {position:absolute;宽度:30像素;高度:200像素;背景:黑色;右:0;顶部:0; }
< / style>
< / head>
< body>
< div id =blokje>
< div id =tit>& nbsp< / div>
< p>< a href =#>连结< / a>< br />这是我希望我的内容可点击的内容,就像上面的链接一样< / p>
< / div>
< / body>
< / html>


解决方案

实际上一遍又一遍地绑定和解除事件。

  $(function(){
$)我可能会停止传播,以便文档永远不会看到它发生。 (document).bind('mousemove',function(e){
$('#blokje')。offset({top:e.pageY-100});
});

$('#blokje')。bind('mousemove',function(e){
e.stopPropagation();
});
});

Fiddler


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

解决方案

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

这篇关于停止更改悬停jQuery上的偏移量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆