Change parent div background when hovered over child li

Question

I am trying to change the background image of a parent div, which has some bunch of ul li. The HTML code is as follows:-

    <section class="list" id="services"> 
    <div class="row">
        <ul>
            <li><a href="automation.html" class="list-item"> <span class="desc">About the page</span><span class="title">Automation</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="research.html" class="list-item"> <span class="desc">About the page</span><span class="title">R&D</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="ui.html" class="list-item"> <span class="desc">About the page</span><span class="title">UI/UX</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>         
            <li><a href="webdev.html" class="list-item"> <span class="desc">About the page</span><span class="title">Web Development</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="mobile.html" class="list-item"> <span class="desc">About the page</span><span class="title">Mobile App Development</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="market.html" class="list-item"> <span class="desc">About the page</span><span class="title">Digital Marketing</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="gaming.html" class="list-item"> <span class="desc">About the page</span><span class="title">Gaming</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="business.html" class="list-item"> <span class="desc">About the page</span><span class="title">Our Business</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="faq.html" class="list-item"> <span class="desc">About the page</span><span class="title">FAQ</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="about.html" class="list-item"> <span class="desc">About the page</span><span class="title">About Us</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
        </ul>
    </div>
</section>

The class "list" has a background image. When a user hovers over li a, I am trying to change the background image of "list". And this what I tried:-

   .list ul li a:hover .list {background-image: url('some.jpg');

It doesn't work. And moreover, the background image should change according to the relevant category. For instance, if I hover over automation li, the appropriate image should load as background. I tried the following as well:-

HTML

<li><a href="automation.html" class="list-item" data-class="someclass"> <span class="desc">About the page</span><span class="title">Automation</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>

JS

<script> var el = document.getElementById("services");
el.addEventListener("mouseover", services);
function services(e) {
        e.currentTarget.className = e.target.getAttribute('data-class');
}
</script>

This is destroying "list" class and appending a "null" class to it. Any idea whats wrong? I am completely new to JS and I am trying hard to learn this. Any help is appreciated.

`For instance, if I hover over automation li, the appropriate image should load as background` Where is that appropriate image? — brk, Dec 30 '17 at 05:21
your **css** can't work because using this syntax **a:hover .list** will *search for a descendants in the **a** tag which have the class **list** not parent — mostafa tourad, Dec 30 '17 at 05:24
@mostafatourad Yes, you are bang on right. And I learnt that we cannot target parent elements through CSS. So I think jQuery is the only solution. — user3518263, Dec 30 '17 at 05:59
no JQuery is not the only solution , there are many solutions I will provide you a simple one — mostafa tourad, Dec 30 '17 at 06:00
Please read https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector?noredirect=1&lq=1 — connexo, Dec 30 '17 at 09:44

score 0 · Answer 1 · answered Dec 30 '17 at 06:37

Typically it can't be done in pure css. But it support styling in cascading direction, not up.

You can consider this pseudo markup:

<parent>
   <sibling></sibling>
   <child></child>
</parent>

The trick is to give the sibling the same size and position as the parent and to style the sibling instead of the parent. This will look like the parent is styled!

Now, how to style the sibling?

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

This trick on the example in the question results in this fiddle

You can try this.

score 0 · Answer 2 · answered Dec 30 '17 at 06:39

Well, you talking about parent selector when you trying something like that: .list ul li a:hover .list {background-image: url('some.jpg'); this is not possible to in only by CSS.

Now we have another option use JavaScript. What you tried in your script in question post this is not complete solution. I tried my own way using your markup, please see below if it is work for you:

<section class="list" id="services"> 
    <div class="row">
        <ul>
            <li><a href="automation.html" class="list-item" data-class="someclass-1"> <span class="desc">About the page</span><span class="title">Automation</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="research.html" class="list-item" data-class="someclass-2"> <span class="desc">About the page</span><span class="title">R&D</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="ui.html" class="list-item" data-class="someclass-3"> <span class="desc">About the page</span><span class="title">UI/UX</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>         
            <li><a href="webdev.html" class="list-item" data-class="someclass-4"> <span class="desc">About the page</span><span class="title">Web Development</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="mobile.html" class="list-item" data-class="someclass-5"> <span class="desc">About the page</span><span class="title">Mobile App Development</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="market.html" class="list-item" data-class="someclass-6"> <span class="desc">About the page</span><span class="title">Digital Marketing</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="gaming.html" class="list-item" data-class="someclass-7"> <span class="desc">About the page</span><span class="title">Gaming</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="business.html" class="list-item" data-class="someclass-8"> <span class="desc">About the page</span><span class="title">Our Business</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="faq.html" class="list-item" data-class="someclass-9"> <span class="desc">About the page</span><span class="title">FAQ</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="about.html" class="list-item" data-class="someclass-10"> <span class="desc">About the page</span><span class="title">About Us</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
        </ul>
    </div>
</section>

And script is where you need both mouseover and mouseout otherwise you not able to remove class once you added on hover:

var parent = document.getElementById("services");

var acnhors = document.querySelectorAll(".list > .row > ul > li > a");

for(var i = 0; i < acnhors.length; i ++){
  acnhors[i].addEventListener("mouseover", inHover);
  acnhors[i].addEventListener("mouseout", outHover);
}

function inHover(e){
  parent.classList.add(this.getAttribute('data-class'));
}
function outHover(e){
  parent.classList.remove(this.getAttribute('data-class'));
}

Change parent div background when hovered over child li

2 Answers2