Change color of layers on mouseover inside a nested div

Question

I have the following html code, and I'm trying to change the background color of the div tags in such a way that when I mouse over the text, the background should turn to grey but when I move the mouse out of the tag, it should change to white. I'm trying to do this using css but I'm having a hard time coming up with the code. Is this possible using css only? Can someone show me an example?

<div class="custom-select">
<div style="background-color: grey;">TEST 1</div>
<div style="background-color: white;">TEST 2</div>
</div>

Thanks in advance.

In order for us to help you better, please update your question so that it shows your relevant code in a [minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve). It would be helpful if you could let us know [what you have tried so far](https://meta.stackoverflow.com/questions/261592) to solve your problem. For further information, please refer to the help article regarding [how to ask good questions](https://stackoverflow.com/help/how-to-ask). — wazz, Jun 14 '18 at 05:21
Possible Duplicate: [div background color, to change onhover ](https://stackoverflow.com/questions/676324/div-background-color-to-change-onhover) — dekts, Jun 14 '18 at 05:26
Possible duplicate of [div background color, to change onhover](https://stackoverflow.com/questions/676324/div-background-color-to-change-onhover) — davecar21, Jun 14 '18 at 05:28

score 1 · Answer 1 · edited Jun 20 '18 at 06:10

1

You can use onmouseover and onmouseout events like this:

var div = document.getElementById('div_id');

div.onmouseover = function() {

    this.style.backgroundColor = 'grey';
 
};

div.onmouseout = function() {

    this.style.backgroundColor = 'white';
 
};

edited Jun 20 '18 at 06:10

Charlie

22,886
11
59
90

answered Jun 14 '18 at 05:52

sachintha nayanajith

11
2

I'm getting an error saying that var div is null. did I miss something? Thanks for helping. – Mark Jun 14 '18 at 06:30
Ok. please specify an id to your divs so that you can get the id of the div – sachintha nayanajith Jun 14 '18 at 07:03
something like this
TEST 1

TEST 2
– sachintha nayanajith Jun 14 '18 at 07:11
then after that provide that id like this var div1 = document.getElementById('1'); var div2 = document.getElementById('2'); – sachintha nayanajith Jun 14 '18 at 07:11

score 0 · Answer 2 · answered Jun 14 '18 at 05:24

Use :hover to div and then change background-color

.custom-select .div1{
background-color:grey;
}
.custom-select .div2{
background-color:white;
}
.custom-select .div1:hover{
background-color:white;
}
.custom-select .div2:hover{
background-color:grey;
}

<div class="custom-select">
<div class="div1">TEST 1</div>
<div class="div2">TEST 2</div>
</div>

score 0 · Answer 3 · answered Jun 14 '18 at 05:24

This can be done via css.

.custom-select .first,
.custom-select .second {
  background: white;
}

.custom-select .first:hover {
  background: gray;
}

.custom-select .second:hover {
  background: gray;
}

<div class="custom-select">
  <div class="first">TEST 1</div>
  <div class="second">TEST 2</div>
</div>

score 0 · Answer 4 · answered Jun 14 '18 at 05:24

0

You can use CSS hover pseudo-selectors:

HTML:

<div class="custom-select">
    <div>TEST 1</div>
    <div>TEST 2</div>
</div>

CSS:

.custom-select > div {
    background: white;
}

.custom-select > div:hover {
    background: gray;
}

answered Jun 14 '18 at 05:24

Spooze

378
1
10

thanks for helping, how would the css code change if initially only the TEST 1 div was grey and then it would change to white once I move the mouse to TEXT2? – Mark Jun 14 '18 at 05:57

RyDog · Accepted Answer · 2018-06-15T05:07:39.307

0

Since this is what you were looking for, I have updated my code snippet to include comments explaining what each part does.

/* PART 1 - Set first child's background colorinside custom-select to grey*/
.custom-select div:first-child
{ 
  background-color:grey; 
}

/* PART 2 - if hovering over custom-select 'undo' the styling set to the first child by setting background-color to white */
.custom-select:hover div:first-child{
  background-color: white;
}

/* PART 3 - Hover effect for divs inside custom-select */
.custom-select>div:hover{
  background-color: grey !important;
  /* !important is used to override the styling in PART 2 */
}

<div class="custom-select">
  <div>TEST 1</div>
  <div>TEST 2</div>
</div>

edited Jun 15 '18 at 05:07

answered Jun 14 '18 at 05:26

RyDog

1,169
1
9
12

It is very close to what I need. But on initial load, I need to set the background color of the first div to grey so I was using the code below. Then when you move the mouse over each tag it should behave like your code. .custom-select div:first-child{ background-color:grey; } – Mark Jun 14 '18 at 05:52
Thank you RyDog! This is what I was looking for. – Mark Jun 15 '18 at 04:50
No problem, I added some comments to give a brief explanation of whats going on . – RyDog Jun 15 '18 at 05:08

Terry Wei · Answer 6 · 2018-06-14T07:17:12.057

0

Here is an example by using :hover in css:

Edited

Using first-child & last-child to do without class:

.custom-select>div:first-child {
    background-color: gray;
}

.custom-select>div:last-child {
    background-color: white;
}

.custom-select>div:first-child:hover {
    background-color: white;
}

.custom-select>div:last-child:hover {
    background-color: grey;
}

<div class="custom-select">
  <div>TEST 1</div>
  <div>TEST 2</div>
</div>

Here is an example to modify the style of the other(MouseEvent):

var custom_select = document.getElementsByClassName('custom-select')[0];

var first = custom_select.children[0];
var second = custom_select.children[1];

first.onmouseenter = function(event){
  second.style['background-color'] = 'gray';
}
first.onmouseout = function(event){
  second.style['background-color'] = 'white';
}
second.onmouseenter = function(event){
  first.style['background-color'] = 'white';
}
second.onmouseout = function(event){
  first.style['background-color'] = 'gray';
}

.custom-select>div:first-child {
    background-color: gray;
}

.custom-select>div:last-child {
    background-color: white;
}

<div class="custom-select">
  <div>TEST 1</div>
  <div>TEST 2</div>
</div>

edited Jun 14 '18 at 07:17

answered Jun 14 '18 at 05:26

Terry Wei

1,521
8
16

thanks for helping but unfortunately, I can't put classes inside the nested div tags. – Mark Jun 14 '18 at 06:33
I modified the example without class. – Terry Wei Jun 14 '18 at 06:37
If you have multiple div, you could use :nth-child(x) – Terry Wei Jun 14 '18 at 06:38
almost there, I changed your code to this, but is it possible to change the background of the first div to white when I hover to the last div? .custom-select>div:first-child{ background-color: gray; } .custom-select>div:last-child { background-color: white; } .custom-select>div:first-child:hover { background-color: white; } .custom-select>div:last-child:hover { background-color: grey; } – Mark Jun 14 '18 at 07:03
simply use css I think it is impossible.(if wrong please correct me). so I suggest to use JavaScript to do so. – Terry Wei Jun 14 '18 at 07:06
Thank you Terri Wei! I was able to use your code to solve my problem. – Mark Jun 15 '18 at 04:51

Change color of layers on mouseover inside a nested div

6 Answers6