HTML中关于鼠标指向改变div显示
利用样式表中 display属性来实现
例如
<html>
<title>aaaaa</title>
<head>
<style>
#changing1
{
width:980px;
height:760px;
left:0px;
top:50px;
position:absolute;
background-image:url(images/xs1.png);
display:block;}
#changing2
{
width:980px;
height:760px;
left:0px;
top:50px;
position:absolute;
background-image:url(images/xs2.png);
display:none;}
#changing3
{
width:980px;
height:760px;
left:0px;
top:50px;
position:absolute;
background-image:url(images/xs3.png);
display:none;}
</style>
</head>
<body>
<div id="changing1"></div> <!--需要变换的div-->
<div id="changing2"></div> <!--需要变换的div-->
<div id="changing3"></div> <!--需要变换的div-->
<div style="height:40px; width=30px; left:100px; top:100px;" onmouseover="change1()">
</div> <!--需要指向的div,利用onmouseover即鼠标指向的时候执行change1事件-->
<div style="height:40px; width=30px; left:150px; top:100px;" onmouseover="change2()">
</div> <!--需要指向的div,利用onmouseover即鼠标指向的时候执行change2事件-->
<div style="height:40px; width=30px; left:200px; top:100px;" onmouseover="change3()">
</div> <!--需要指向的div,利用onmouseover即鼠标指向的时候执行change3事件-->
</body>
<script type="text/javascript">
function change1()
{
var ch1=document.getElementById("changing1");
var ch2=document.getElementById("changing2");
var ch3=document.getElementById("changing3");
var ch4=document.getElementById("changing4");
var ch5=document.getElementById("changing5");
ch1.style.display="block";
ch2.style.display="none";
ch3.style.display="none";
ch4.style.display="none";
ch5.style.display="none";}
function change2()
{
var ch1=document.getElementById("changing1");
var ch2=document.getElementById("changing2");
var ch3=document.getElementById("changing3");
var ch4=document.getElementById("changing4");
var ch5=document.getElementById("changing5");
ch1.style.display="none"
ch2.style.display="block"
ch3.style.display="none"
ch4.style.display="none"
ch5.style.display="none"}
function change3()
{
var ch1=document.getElementById("changing1");
var ch2=document.getElementById("changing2");
var ch3=document.getElementById("changing3");
var ch4=document.getElementById("changing4");
var ch5=document.getElementById("changing5");
ch1.style.display="none"
ch2.style.display="none"
ch3.style.display="block"
ch4.style.display="none"
ch5.style.display="none"}
</script>
</html>
利用这个方法可以实现鼠标指向时改变div的显示 也可以将onmouseover改为onlink 效果就是鼠标点击改变div显示
