0

我创建了一个 div 和一个锚列表。

<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更改文本颜色，当鼠标悬停时它将恢复正常颜色。

我曾尝试使用 javascript 来执行此操作，但问题是当我将鼠标悬停在其中一个 div 框上时，例如我将鼠标悬停在box1将a1颜色更改为红色但当我鼠标移出时，它不会变为蓝色，它将保留在红色的。

这个mycode看起来像：

<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>

有人知道我的案子吗？

任何帮助将不胜感激。谢谢

4

5 回答 5

2 
<div id="box2" onmouseover="mouseoverBox2()" onmouseout="onmouseoutBox2()" "></div>

这一行有一个额外的 " 。应该是：

<div id="box2" onmouseover="mouseoverBox2()" onmouseout="onmouseoutBox2()"></div>
于 2012-10-19T07:16:46.343 回答
2

css

#box1:hover ~ ul #a1 {
  color: red;
}

http://jsfiddle.net/4tduS/

不需要js

于 2012-10-19T07:21:26.150 回答
2 
<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>​​​​​

您拼错了一个类名并在 div 标记的末尾添加了一个引号。

如果您没有编写代码的经验，则此错误很常见；

于 2012-10-19T07:26:22.573 回答
0

.....................

你好现在用来j查询直播demo 

$(document).ready(function() {
    $("#box1").mouseenter(function(){
        $("#a1").addClass("a1_hover");
    });


    $("#box1").mouseleave(function(){
        $("#a1").removeClass("a1_hover");
        $("#a1").addClass("a1")
    });





        $("#box2").mouseenter(function(){
        $("#a2").addClass("a2_hover");
    });


    $("#box2").mouseleave(function(){
        $("#a2").removeClass("a2_hover");
        $("#a2").addClass("a2")
    });

});
于 2012-10-19T07:36:43.770 回答
0

尝试使用 css ：

<style type="text/css">
#a1 { color:blue; }
#box1:hover + #a1 { color:red; }
</style>

<div id="box1">Color text 1 to red</div>
<a href="" id="a1">Text1</a>

见演示

于 2012-10-19T07:37:47.000 回答