hover to div to change other element's style

Question

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>

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.

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.

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

At least in Google Chrome it is working fine: http://jsfiddle.net/KkMtq/ — j0nes, Oct 19 '12 at 07:17
doing this in css is also possible:http://stackoverflow.com/questions/4502633/css-how-to-affect-other-elements-when-a-div-is-hovered — SmithMart, Oct 19 '12 at 07:26

score 2 · Answer 1 · answered Oct 19 '12 at 07:16

2

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

This line has an extra " in it. Should be:

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

answered Oct 19 '12 at 07:16

nathan hayfield

2,627
1
17
28

Michael Theriot · Answer 2 · 2012-10-19T07:36:25.383

2

css

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

http://jsfiddle.net/4tduS/

no js necessary

edited Oct 19 '12 at 07:36

answered Oct 19 '12 at 07:21

Michael Theriot

994
7
13

score 2 · Accepted Answer · answered Oct 19 '12 at 07:26

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

You mispelled a class name and added a quote at the end of a div tag.

This errors are quite common if you are not experienced writing code;

score 0 · Answer 4 · answered Oct 19 '12 at 07:36

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

Hi now used to j query Live 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")
    });

});

score 0 · Answer 5 · answered Oct 19 '12 at 07:37

0

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

see DEMO

answered Oct 19 '12 at 07:37

rusly

1,504
6
28
62

hover to div to change other element's style

5 Answers5

Linked