这个函数 帮忙看看呗

kiba518 2010-01-24 11:08:43
<style>
.kcon{ width:550px; border:1px solid #eeeeee; height:228px;}
.kleft1{ width:405px; height:222px; float:left; padding:3px;}
.kleft2{ width:405px; height:222px; float:left; padding:3px; display:none}
.kright{ float:right; height:222px; padding:3px; width:127px}
.krnt{margin-top:4px; margin-bottom:5px;}
.krn{margin-bottom:5px;}

.kright a{ display:block;border:1px solid #eeeeee; color:#000000; text-align:center; width:125px; height:49px;line-height:49px; text-decoration:none;}
.kright a.ka:hover{ background-color:#ad2323;color:#FFFFFF;}
.ka{}
.ka2{ background-color:#ad2323;color:#FFFFFF;}
</style>
</head>

<body>

<div class="kcon">
<div id="kl0" class="kleft1"><img src="a.jpg"></div>
<div id="kl1" class="kleft2"><img src="b.jpg"></div>
<div id="kl2" class="kleft2"></div>
<div id="kl3" class="kleft2"><img src="d.jpg"></div>

<div class="kright">
<div id="kr0" class="krnt" onMouseMove="chang(0)" onMouseOver=""="over(0)"><a class="ka" href="#" >第一个</a></div>
<div id="kr1" class="krn" onMouseMove="chang(1)" onMouseOver="over(1)"> <a class="ka" href="#" >2</a></div>
<div id="kr2" class="krn" onMouseMove="chang(2)" onMouseOver="over(2)"> <a class="ka" href="#" >3</a></div>
<div id="kr3" class="krnd" onMouseMove="chang(3)" onMouseOver="over(3)"><a class="ka" href="#" >4</a></div>
</div>
</div>
<script language="javascript">
function chang(n)
{
for(var i=0; i<4;i++)
{
var id='kl'+i;
if(i==n)
{document.getElementById(id).style.display="Block";}
else
{document.getElementById(id).style.display="None";}
}
}
function over(n){
for(var i=0;i<4;i++){
var name="kr"+n;
if(n==i){

document.getElementById(name).style.color="#ffffff";
document.getElementById(name).style.backgroundColor="#ad2323";
}
else{
document.getElementById(name).style.color="#000000";
document.getElementById(name).style.backgroundColor="";
}
}
}
</script>

我想让 鼠标离开后 让离开的那个 DIV保持红色背景
...全文
60 4 打赏 收藏 举报
写回复
4 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
草根醉秋意 2010-01-24
  • 打赏
  • 举报
回复
onmouseout呗
kiba518 2010-01-24
  • 打赏
  • 举报
回复
<style>
.kcon{ width:550px; border:1px solid #eeeeee; height:228px;}
.kleft1{ width:405px; height:222px; float:left; padding:3px;}
.kleft2{ width:405px; height:222px; float:left; padding:3px; display:none}
.kright{ float:right; height:222px; padding:3px; width:127px}
.krnt{margin-top:4px; margin-bottom:5px;}
.krn{margin-bottom:5px;}

.kright a{ display:block;border:1px solid #eeeeee; color:#000000; text-align:center; width:125px; height:49px;line-height:49px; text-decoration:none;}
.kright a.ka:hover{ background-color:#ad2323;color:#FFFFFF;}

</style>
</head>

<body>

<div class="kcon">
<div id="kl0" class="kleft1"><img src="a.jpg"></div>
<div id="kl1" class="kleft2"><img src="b.jpg"></div>
<div id="kl2" class="kleft2"></div>
<div id="kl3" class="kleft2"><img src="d.jpg"></div>

<div class="kright">
<div id="kr0" class="krnt" onMouseMove="chang(0)" onMouseOver="over(0)"><a class="ka" href="#" >第一个</a></div>
<div id="kr1" class="krn" onMouseMove="chang(1)" onMouseOver="over(1)"> <a class="ka" href="#" >2</a></div>
<div id="kr2" class="krn" onMouseMove="chang(2)" onMouseOver="over(2)"> <a class="ka" href="#" >3</a></div>
<div id="kr3" onMouseMove="chang(3)" onMouseOver="over(3)"> <a class="ka" href="#" >4</a></div>
</div>
</div>
<script language="javascript">
function chang(n)
{
for(var i=0; i<4;i++)
{
var id='kl'+i;
if(i==n)
{document.getElementById(id).style.display="Block";}
else
{document.getElementById(id).style.display="None";}
}
}
function over(n){
for(var i=0;i<4;i++){
var name="kr"+i;
if(n==i){

document.getElementById(name).style.color="#FFFFFF";
document.getElementById(name).style.backgroundColor="#ad2323";
}
else{
document.getElementById(name).style.color="#000000";
document.getElementById(name).style.backgroundColor="";
}
}
}
</script>


看下这个吧

改好了 可是 我控制不了 鼠标离开后的 字体颜色
friendly_ 2010-01-24
  • 打赏
  • 举报
回复
因为连接<a>的缘故,在style中你已经限定了a a:hover的颜色。你可以去掉<a></a>试试
kiba518 2010-01-24
  • 打赏
  • 举报
回复
不对 我现在取 CLASSNAME 就实现效果
可是 document.getElementById(name).style.color="#FFFFFF";
这个 设置不了颜色
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-01-24 11:08
社区公告
暂无公告