悬停到div以更改其他元素的样式 [英] hover to div to change other element's style
问题描述
我创建了一个div和一个锚点列表。
I create an div and a list of anchor.
<div id="wrap">
<div id="box1"></div>
<div id="box2"></div>
<ul>
<li><a href=".." id="a1">text1</a></li>
<li><a href=".." id="a2">text2</a></li>
</ul>
</div>
我的目标是当鼠标悬停在 box1
a1
将更改文本颜色,当它出现鼠标时,它将返回正常颜色。
my goal is when I mouseover the box1
the a1
will change the text color and when it mouseout it will back to the normal color.
使用javascript做到这一点,但问题是当我鼠标悬停在一个div框,例如我鼠标移动 box1
a1
会将颜色改为红色,但当我mouseout时,它不会变成蓝色,它将保持红色。
I have try to do this using javascript but the problem is when I mouseover the one of the div box, for example I mouseover the box1
the a1
will change the color to red but when I mouseout, it will not change to blue, it will remain in red.
这个mycode看起来像:
this mycode look like:
<script type="text/javascript">
function mouseoverBox1(){
var myPara = document.getElementById("a1");
myPara.style.color = "red";
}
function onmouseoutBox1(){
var myPara = document.getElementById("a1");
myPara.style.color = "blue";
}
function mouseoverBox21(){
var myPara = document.getElementById("a2");
myPara.style.color = "red";
}
function onmouseoutBox2(){
var myPara = document.getElementById("a2");
myPara.style.color = "blue";
}
</script>
<style>
a{color:red;}
a:hover{color:blue;}
.box{min-height: 180px;width: 220px;position: absolute;cursor: pointer;}
</style>
<div id="wrap">
<div class="box" id="box1" onmouseover="mouseoverBox1()" onmouseout="onmouseoutBox1()" ></div>
<div class="box" id="box2" onmouseover="mouseoverBox2()" onmouseout="onmouseoutBox2()"></div>
<ul>
<li><a href=".." id="a1">text1</a></li>
<li><a href=".." id="a2">text2</a></li>
</ul>
</div>
有没有人知道我的案件?
does anyone have an idea about my case?
任何帮助将不胜感激。感谢
any help will be appreciated. Thanks
推荐答案
<script type="text/javascript">
function mouseoverBox1(){
var myPara = document.getElementById("a1");
myPara.style.color = "red";
}
function onmouseoutBox1(){
var myPara = document.getElementById("a1");
myPara.style.color = "blue";
}
function mouseoverBox2(){
var myPara = document.getElementById("a2");
myPara.style.color = "red";
}
function onmouseoutBox2(){
var myPara = document.getElementById("a2");
myPara.style.color = "blue";
}
</script>
<style>
a{color:red;}
a:hover{color:blue;}
</style>
<div id="wrap">
<div id="box1" onmouseover="mouseoverBox1()" onmouseout="onmouseoutBox1()">deve</div>
<div id="box2" onmouseover="mouseoverBox2()" onmouseout="onmouseoutBox2()">deve</div>
<ul>
<li><a href="#" id="a1">text1</a></li>
<li><a href="#" id="a2">text2</a></li>
</ul>
</div>
您拼写错误,
这些错误是很常见的,如果你没有经验的编写代码;
This errors are quite common if you are not experienced writing code;
这篇关于悬停到div以更改其他元素的样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!