html、css、jquery的hover事件怎么样只在下图的margin区域触发？
如图，结构大概是<body><div>这是上方div</div><div>这是下方div</div></body>下方的div设置了margin:20pxauto；如何让...
如图，结构大概是<body> <div>这是上方div</div> <div>这是下方div</div></body>下方的div设置了margin:20px auto；如何让一个事件只在图中的margin区域触发？
展开
2个回答
展开全部
你这种需求，只能通过判断鼠标的位置了，当鼠标进入的位置处于这两者之间的共同区域时，触发事件。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<title>Div MouseOver</title>
</head>
<body>
<div id="div1" style="width:600px;height:600px;background-color:#ff0">
<div id="div2" style="width:300px;height:300px;background-color:#f00;margin:100px;display:inline-block;">
</div>
<script>
var $=function(obj){
return document.querySelector(obj);
}
$('div').addEventListener('mouseover',function(e,s){
if(e.offsetX<100&&e.offsetY<600||e.offsetX>400&&e.offsetY<600||e.offsetX>0&&e.offsetY<100||e.offsetX>0&&e.offsetY>400) console.log("X:",e.offsetX, "Y:",e.offsetY);
else console.log('不在区域内');
});
</script>
</div>
</body>
</html>
追问
嗯，大概只能这么干了，但是涉及到居中和按百分百显示时就特别cd了...
另外请问一下，margin在“地理上”是属于div的，因为它占了那块地，但各种事件只能由div的内容、padding以及border触发，这又显得它不属于这个div，目前没有关于margin事件的方法吗？
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
