Javascript 将鼠标悬停到div以更改其他元素'；s风格

我创建了一个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>

有人知道我的案子吗

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

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

无需js

css

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

无需js

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

函数mouseoverBox1（）{
var myPara=document.getElementById（“a1”）；
myPara.style.color=“红色”；
}
函数onmouseoutBox1（）{
var myPara=document.getElementById（“a1”）；
myPara.style.color=“蓝色”；
}
函数mouseoverBox2（）{
var myPara=document.getElementById（“a2”）；
myPara.style.color=“红色”；
}
函数onmouseoutBox2（）{
var myPara=document.getElementById（“a2”）；
myPara.style.color=“蓝色”；
}
a{颜色：红色；}
a:悬停{颜色：蓝色；}
德维
德维




​​​​​

您错贴了类名，并在div标记的末尾添加了引号

如果您没有编写代码的经验，这种错误很常见

函数mouseoverBox1（）{
var myPara=document.getElementById（“a1”）；
myPara.style.color=“红色”；
}
函数onmouseoutBox1（）{
var myPara=document.getElementById（“a1”）；
myPara.style.color=“蓝色”；
}
函数mouseoverBox2（）{
var myPara=document.getElementById（“a2”）；
myPara.style.color=“红色”；
}
函数onmouseoutBox2（）{
var myPara=document.getElementById（“a2”）；
myPara.style.color=“蓝色”；
}
a{颜色：红色；}
a:悬停{颜色：蓝色；}
德维
德维




​​​​​

您错贴了类名，并在div标记的末尾添加了引号

如果您没有编写代码的经验，这种错误很常见

Hi现在用于j查询

$(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")
    });

});

Hi现在用于j查询

$(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")
    });

});

尝试使用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>

#a1{颜色：蓝色；}
#框1:hover+#a1{颜色：红色；}
将文本1颜色设置为红色

请参见尝试使用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>

#a1{颜色：蓝色；}
#框1:hover+#a1{颜色：红色；}
将文本1颜色设置为红色

---

请看

它工作正常我在JSFIDDLE上试过了至少在谷歌Chrome上工作正常：啊。。。等等，我的代码不完整，抱歉：）在css中这样做也是可能的：它工作正常我在JSFIDDLE上试过，至少在Google Chrome上工作正常：啊。。。等等，我的代码不完整，抱歉：）在css中执行此操作也是可能的：