How to change div color?

Question

How can I change div bg color From when I mouse over the another div...??

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.Div1{width:100px; height:100px; background-color:red; float:left; margin-right:30px; }
.Div2{width:100px; height:100px; background-color:#00C; float:left }
</style>
</head>
<body>
<div class="Div1">asdlsakd</div>
<div class="Div2">asdsa</div>
</body>
</html>

I want to change color of div1 to yellow when i mouse over the div2 how can I???

This is my fiddle link : http://jsfiddle.net/anupkaranjkar/S5Yu5/

If I am not wrong from your question, you have two overlapping divs, div1 and div2 and you want to hover on them to get a yellow color? Is that what you mean? — Nitesh, Oct 16 '13 at 12:13
I mean i want to change color of div2 when I hover mouse to div1...?? — Anup Karanjkar, Oct 16 '13 at 12:31
`I want to change color of div1 to yellow when i mouse over the div2 how can I???` You want on both div or only one div - @AnupKaranjkar ? — Nitesh, Oct 16 '13 at 12:33
possible duplicate of [On a CSS hover event, can I change another div's styling?](http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling) — Pavlo, Oct 16 '13 at 12:44

roemel · Accepted Answer · 2013-10-16T13:14:33.483

5

jQuery way:

Try to use jQuery .show(); and .hide(); function.

HTML:

<div id="div1">This is div1</div>
<div id="div2">This is div2</div>

CSS:

#div1{
    width:100px;
    height:100px;
    background-color:red;
}

#div2{
    width:100px;
    height:100px;
    background-color:blue;
    display:none;
}

jQuery:

$("#div1").hover(function() {
    $("#div2").show();
    }, 
function() {
    $("#div2").hide();
});

Don't forget to link to jquery.min.js.

Add <script src="http://code.jquery.com/jquery-latest.min.js"></script> to your <head></head> tag. Otherwise it won't work.

Have a look at this fiddle

EDIT:

Pure CSS:

Put a container around your divs like this:

<div id="content">
    <div id="div1">This is div1</div>
    <div id="div2">This is div2</div>
</div>

after that you can use :first-child and :hover in this way:

//styling your divs
#div1{
    width:100px;
    height:100px;
    background-color:red;
}

#div2{
    width:100px;
    height:100px;
    background-color:blue;
    display:none;
}

//hover function
#content > div:first-child{
    display:block;
}

#content > div:hover + div {
    display:block;
}

If you want to see it in practise have a look at this demo

edited Oct 16 '13 at 13:14

answered Oct 16 '13 at 12:40

roemel

3,247
4
29
52

reason of downvote? If you vote down please tell me the reason so I can help better next time. – roemel Oct 16 '13 at 12:44
this is perfect but I dont want to use of any other language, Just using html or css...!! please try – Anup Karanjkar Oct 16 '13 at 12:47
You are cracking a nut with a sledgehammer here. What OP's asking can be achieved without any JS at all, set aside using libraries like jQuery. – Pavlo Oct 16 '13 at 12:50
@Pavlo okay thanks for your comment, i will remember next time before answering :) – roemel Oct 16 '13 at 12:56
Hey Roman Thanks Its Solve I like it also ... Thank you very much – Anup Karanjkar Oct 16 '13 at 13:07

lt.kraken · Answer 2 · 2013-10-16T12:58:15.693

2

As the users above state, you should use :hover to achieve that. However they gave you an example what to do when you hover the div itself.

Your question was how to change the color if you went Hover the other div, so heres the code, this however implies that the second div is nested into the first div:

Div1:hover Div2 {
    background-color: yellow;
}

Here is an example which is achieved with JQuery where it doesn't matter if they are nested or not:

var defaultBackground = $("div#two").css("background-color");
$( "div#one" )
  .mouseover(function() {
      $("div#two").css("background-color", "yellow");
  })
  .mouseout(function() {
    $("div#two").css("background-color", defaultBackground);
  });

http://jsfiddle.net/d58Rb/

To match your HTML code, i updated the JSFiddle: http://jsfiddle.net/S5Yu5/1/

Just in case anyone else ever needs this solution (I don't see it anywhere)

This is possible using CSS/HTML, but only if the divs are directly below eachother.

#Div1:hover + Div2 {
    background-color: yellow;
}

edited Oct 16 '13 at 12:58

answered Oct 16 '13 at 12:10

lt.kraken

1,287
3
10
27

Tested in JSFiddle and you are right. My code implies that the second div is nested into the first. I am not sure if you can change the background of the second div when hovering the first through CSS if they are not linked to eachother. The JQuery example will work tho. Also i updated the JSFiddle, and check the result when the second is nested into the first (The text color will change): http://jsfiddle.net/d58Rb/1/ – lt.kraken Oct 16 '13 at 12:30
thnx its working but friend i want its work only using css or html – Anup Karanjkar Oct 16 '13 at 12:38
With your current code it is not possible. You would have to nest one of the divs. – lt.kraken Oct 16 '13 at 12:44
Its possible bro I sor out the Problem thnx for try to help me – Anup Karanjkar Oct 16 '13 at 12:46
Its possible my friend I can do it...!! I solve my own question..!! – Anup Karanjkar Oct 16 '13 at 12:49

score 1 · Answer 3 · answered Oct 16 '13 at 12:10

1

Use Like this:

<div id="mydiv" style="width:200px;background:white"  onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
Hello World!
</div>

answered Oct 16 '13 at 12:10

Ramesh Roddam

243
1
2
14

score 0 · Answer 4 · answered Oct 16 '13 at 12:09

0

What you need is :hover

Div1:hover {
  background-color:yellow;
}

answered Oct 16 '13 at 12:09

Praveen

55,303
33
133
164

score 0 · Answer 5 · answered Oct 16 '13 at 12:10

You can do it simply with css

Div1:hover {
      background-color:yellow;
}

OR

with JQuery

$("div").hover(function() { // mouseenter
    $(this).addClass("hover");
    }, function() { // mouseleave
    $(this).removeClass("hover");
});

css

.hover {
      background-color:yellow;
}

score 0 · Answer 6 · answered Oct 16 '13 at 12:11

Select and style every element that are placed immediately after elements:

 .first:hover +div{background:red;}  
    <div class="first"> 
          some    
      </div>
      <div>other</div>

Example2

   .first:hover div{background:red;}

   .first{border:1px solid blue;width:100px;height:100px}

      <div class="first"> 

          <div>other</div>
      </div>

score -1 · Answer 7 · answered Oct 16 '13 at 12:09

-1

No need to make a div2 to achive this.

Div1{width:100px; height:100px; background-color:red; }
Div1:hover{width:100px; height:100px; background-color:blue; }

Just apply :hover pseudo selector to your existing div1 and you will get the hover effect.

answered Oct 16 '13 at 12:09

Nitesh

15,425
4
48
60

How to change div color?

7 Answers7