请帮忙写一个简单的鼠标经过不同<span>区域显示不同区块的js代码
默认显示第一个区域，鼠标经过<span>区域，<span>背景颜色改变，并且显示对应区域，鼠标移开但没有移到其他<span>区域依旧显示，鼠标移到其他<span>区域则之前显示区域隐藏，并显示该<span>对应的区域，不会写发给我一个网上的例子也可以，只要有用就采纳
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.hi>div{width:30rem;height:30rem;}
.red{background: red;}
.green{background: green;display: none;}
.blue{background: blue;display: none;}
</style>
</head>
<body>
<div class="btn">
<button t="red">红</button>
<button t="green">绿</button>
<button t="blue">蓝</button>
</div>
<div class="hi">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(".btn>button").each(function(){
$(this).hover(function(){
$(".hi>div").hide();
var now=$(this).attr("t");
$("."+now).show();
})
})
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.hi>div{width:30rem;height:30rem;}
.red{background: red;}
.green{background: green;display: none;}
.blue{background: blue;display: none;}
</style>
</head>
<body>
<div class="btn">
<button t="red">红</button>
<button t="green">绿</button>
<button t="blue">蓝</button>
</div>
<div class="hi">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(".btn>button").each(function(){
$(this).hover(function(){
$(".hi>div").hide();
var now=$(this).attr("t");
$("."+now).show();
})
})
</script>
</body>
</html>
温馨提示：答案为网友推荐，仅供参考
相似回答