前端ABCCSS版
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>qdabc.cn</title>
<style>
body {
padding: 2em;
font: 16px/1.5 "Helvetica Neue", Arial, sans-serif;
text-align: center;
}
.block {
position: relative;
display: inline-block;
overflow:hidden;
width: 10em;
height: 10em;
vertical-align: middle;
-webkit-transform: translateZ(0);
}
.block_hoverer {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0;
transition: all .3s ease;
}
.block_hoverer:nth-child(1) {
background: red;
top:-90%;
}
.block_hoverer:nth-child(2) {
background: lime;
top:90%;
}
.block_hoverer:nth-child(3) {
background: orange;
left:-90%;
}
.block_hoverer:nth-child(4) {
background: blue;
left:90%;
}
.block_hoverer:hover {
opacity:1;
top:0;
left:0;
}
.block_content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 10em;
background: #333;
color: #FFF;
}
</style>
</head>
<body>
<p class="text">从不同方向使鼠标指针移过下面的内容</p>
<p>↓</p>
<span>→ </span>
<div class="block">
<div class="block_hoverer">1</div>
<div class="block_hoverer">2</div>
<div class="block_hoverer">3</div>
<div class="block_hoverer">4</div>
<div class="block_content">
Hover me!
</div>
</div>
<span> ←</span>
<p>↑</p>
<script>
'use strict';
</script>
</body>
</html>
JS版
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>qdabc.cn</title>
<style>
.block {
margin: 300px 400px;
width: 300px;
height: 300px;
border: 1px solid;
position: absolute;
overflow: hidden;
}
.move-box {
width: 300px;
height: 300px;
background: #ABD8DE;
position: absolute;
left: 0;
top: 300px;
}
</style>
</head>
<body>
<div class="block">
<div class="move-box"></div>
</div>
<script>
'use strict';
var Block = document.querySelector('.block');
var Boxes = document.querySelector('.move-box');
function css(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, null)[attr];
}
}
function act(obj, attr, target, fn){
obj.timer && clearInterval(obj.timer);
obj.timer = setInterval(function(){
var cur = parseInt(css(obj, attr));
var speed = (target - cur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
var stop = true;
if(cur != target){
stop = false
obj.style[attr] = cur + speed + 'px';
}
if(stop){
clearInterval(obj.timer);
obj.timer = null;
fn && fn();
}
}, 10);
}
function GetPos (ev, el) {
var evt = ev || event;
var x = evt.clientX - (el.offsetLeft + el.offsetWidth/2);
var y = evt.clientY - (el.offsetTop + el.offsetHeight/2);
return Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
}
Block.addEventListener('mouseenter',function(ev){
switch (GetPos(ev,Block)) {
case 0:
console.log('上');
Boxes.style.left = 0 + 'px';
Boxes.style.top = -300 + 'px';
act(Boxes, 'top', 0);
break;
case 1:
console.log('右');
Boxes.style.left = 300 + 'px';
Boxes.style.top = 0 + 'px';
act(Boxes, 'left', 0);
break;
case 2:
console.log('下');
Boxes.style.left = 0 + 'px';
Boxes.style.top = 300 + 'px';
act(Boxes, 'top', 0);
break;
case 3:
console.log('左');
Boxes.style.left = -300 + 'px';
Boxes.style.top = 0 + 'px';
act(Boxes, 'left', 0);
break;
}
},false);
Block.addEventListener('mouseleave',function(ev){
Boxes.style.left = 0 + 'px';
Boxes.style.top = 0 + 'px';
switch (GetPos(ev,Block)) {
case 0:
console.log('上');
act(Boxes, 'top', -300);
break;
case 1:
console.log('右');
act(Boxes, 'left', 300);
break;
case 2:
console.log('下');
act(Boxes, 'top', 300);
break;
case 3:
console.log('左');
act(Boxes, 'left', -300);
break;
}
},false);
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » CSS跟JS版的判断鼠标移入移出位置