hover highlight over hierarchical divs

Question

It is easy to highlight a div when mouse hovers on it.

However, when divs are inside each other, the parent shades over the rest of the divs. How should I tell CSS to hover only on the directly hovered div?

When I hover over parrot, I don't want bird or animal to be highlighted.

div.creature{
  margin:5px;
  padding:5px;
  border: 1px solid;
}
div.creature:hover{
  background: #ffeeaa;
}

<div class="creature">
  animal
  <div class="creature">
    mammal
    <div class="creature">
    cat
    </div>
  </div>
  <div class="creature">
    bird
    <div class="creature">
    parrot
    </div>
    <div class="creature">
    duck
    </div>
  </div>
</div>

UPDATE

The HTML code is created dynamically. Hence, an independent CSS is preferred.

When I hover on bird but not on parrot or duck, I expect the entire bird highlights.

Saurabh · Accepted Answer · 2017-07-23T04:28:28.483

2

Something like this?

Update: added a jQuery function

$(function() {
    $('div').on('mouseover', function(e){
        e.stopPropagation();
        $(this).addClass('my-bg');
    }).on('mouseout', function(e){
        $(this).removeClass('my-bg');
    })
});

div.creature{
  margin:5px;
  padding:5px;
  border: 1px solid;
}

.my-bg{
  background-color: #ffeeaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="creature">
  animal
  <div class="creature">
    mammal
    <div class="creature">
    cat
    </div>
  </div>
  <div class="creature">
    bird
    <div class="creature">
    parrot
    </div>
    <div class="creature">
    duck
    </div>
  </div>
</div>

edited Jul 23 '17 at 04:28

answered Jul 23 '17 at 04:10

Saurabh

2,122
1
18
40

Thank you very much. There are two problems. I expect, hovering on `bird` or `mammal` themselves, highlight their entire `div`. The `div`s are also created dynamically. Therefore, I do not know what to write in CSS in advance. – ar2015 Jul 23 '17 at 04:12
I have updated my answer. Now it's working according to your expectations. An additional jQuery function has been added, so don't forget to include jQuery file in your project. – Saurabh Jul 23 '17 at 04:30
Thank you very much. If I add content to a `div` dynamically, do I need to run the jquery code again? – ar2015 Jul 23 '17 at 04:35
For your problem, No you don't need to call the script again. Just include it in your project and it will work fine. Kindly accept my answer if it solved your problem :) – Saurabh Jul 23 '17 at 04:43
I need to call the commands again. Do multiple event calls overwrite or accumulate? – ar2015 Jul 23 '17 at 05:31
please update your question with the current code that you have tried. – Saurabh Jul 23 '17 at 05:33
Not very optimized method, but still works. https://jsfiddle.net/n5x7j0s8/1/ I will post a good method after a while :) – Saurabh Jul 23 '17 at 06:06

score 1 · Answer 2 · answered Jul 23 '17 at 04:18

This is as close as I can get. I used :nth-of-type

The issue that remains is to turn off the parent background when one of its children is in the :hover state which I don't think CSS supports since it doesn't have parent selectors

That shouldn't be too difficult to fix with JS

div.fruit {
  margin: 5px;
  padding: 5px;
  border: 1px solid;
  background:white; /* otherwise the divs have no background */
}

.fruit:hover {
  background: red;  /* Main parent div  */
}

.fruit > div:nth-of-type(1):hover {
  background: blue; /* First child div */
}

.fruit > div:nth-of-type(1):hover > div:nth-of-type(1):hover {
  background: green; /* First grandchild div */
}

.fruit > div:nth-of-type(2):hover {
  background: yellow; /* second child div */
}

.fruit > div:nth-of-type(3):hover {
  background: orange; /* third child div */
}

<div class="fruit">A1
  <div class="fruit">AA1
    <div class="fruit">AAA1</div>
  </div>
  <div class="fruit">AA2</div>
</div>

score 0 · Answer 3 · answered Jul 23 '17 at 04:26

0

They are doing exactly what you want already. You simply forgot to set a background color on them, so they are showing through to the div beneath. Here is a fiddle demonstrating this:

div.creature{
  margin:5px;
  padding:5px;
  border: 1px solid;
  background: #F3F5F6
}
div.creature:hover{
  background: #FFEEAA;
}

https://jsfiddle.net/shavedave1/ucvvcrer/1/

answered Jul 23 '17 at 04:26

David

47
1
9

Misread your problem statement -- it looks like you don't actually want parent containers highlighted when you are in the children containers. – David Jul 23 '17 at 04:29

hover highlight over hierarchical divs

3 Answers3