效果是这样滴~~
JQUERY的方式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<style>
.nodeSmall{
width: 50px;
height: 50px;
background: url("images/bgs.png") no-repeat -159px -51px;
position: fixed;
right: 10px;
top: 40%;
}
.erweima{
position: absolute;
top: 0;
left: -150px;
display: none;
}
.nodeSmall a {
display: block;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="nodeSmall" id="node_small">
<a href="#"></a>
<div class="erweima" id="er">
<img src="images/456.png" alt=""/>
</div>
</div>
</body>
<script>
window.onload = function () {
a("#node_small","#er");
}
function a(a,b) {
$(a).mouseover(function () {
$(b).css("display","block");
});
$(a).mouseout(function () {
$(b).css("display","none");
});
}
</script>
</html>
原生JS实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.nodeSmall {
width: 50px;
height: 50px;
background: url(images/bgs.png) no-repeat -159px -51px;
position: fixed;
right: 10px;
top: 40%;
}
.erweima {
position: absolute;
top: 0;
left: -150px;
display: none;
}
.nodeSmall a {
display: block;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="nodeSmall" id="node_small">
<a href="#"></a>
<div class="erweima" id="er">
<img src="images/456.png" alt=""/>
</div>
</div>
</body>
</html>
<script>
var node_small = document.getElementById("node_small");
var er = document.getElementById("er");
node_small.onmouseover = function(){
er.style.display = "block"
}
node_small.onmouseout = function(){
er.style.display = "none"
}
</script>