Modify the parent div's background color on mouseover of the child li

I want to update the background image of a parent div that contains a series of ul li elements. Here is the HTML code I am working with:

    <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 "list" class features a background image. My goal is to change this background image when a user hovers over an li a element. Here is what I have attempted:

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

This approach did not work as intended. Additionally, I aim to have the background image change based on the category being hovered over. For example, hovering over the automation list item should load an appropriate background image. I also tried the following method:

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>

However, this script seems to be causing issues by replacing the "list" class with a "null" class instead. Can anyone advise on what might be going wrong? I'm new to JavaScript and eager to learn. Any guidance would be greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

It's not typically achievable using pure css alone. However, you can apply styling in a cascading manner, but not upwards.

You might want to consider this pseudo markup:

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

The key is to make the sibling element the same size and position as the parent, then style the sibling instead of the parent. This will give the illusion that the parent is styled!

So how do you go about styling the sibling?

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

This technique applied to the example in the question can be seen in this demo

Feel free to give it a try.

Answer №2

Well, when discussing the parent selector and attempting something like this: 

.list ul li a:hover .list {background-image: url('some.jpg');
, it is not achievable through CSS alone.

Another option we have is to use JavaScript. The solution you attempted in your script from the question post is not complete. I tried my own approach using your markup, please see below if it works 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>

In terms of the script, you need both mouseover and mouseout events in order to add and remove classes effectively:

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

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

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Invoking numerous functions through the (click)= event

When it comes to removing a user from my site, I find myself having to execute multiple database queries to delete the user's ID across approximately 10 different tables. Currently, I am resorting to what I consider a messy workaround where I have mu ...

javascriptangulartypescriptclick

I encountered a parsing issue while trying to compile my Vue project

Issue: The component name "Header" should always consist of multiple words. Fix: Change the component name to a multi-word format according to Vue standards (vue/multi-word-component-names). ...

javascriptnode.jsvue.jsbabeljseslint

The array's value fluctuates into a negative without any direct manipulation from my end

In order to work with the $scope.option value, I stored it in a temporary variable and then applied operations on the temporary variable after changing all the values of $scope.option to negative numbers. var app = angular.module('myApp', []); ...

javascriptangularjsarrays

Uploading Multiple Files with Ajax and jQuery

I've been trying to implement an ajax multiple file upload form, but I'm facing issues with its functionality. Here is the HTML Code: <form method="post" id="postfrom" enctype="multipart/form-data"> <input type="file" name="file" i ...

phpjqueryajax

Make sure to refresh the node.js express api every minute with the latest timestamp available

I'm currently working on setting up a Node.js Express API to expose a MySQL table. Everything is working fine except for the part where I need to filter data by a current timestamp and update it every few minutes. I've tried using setInterval but ...

javascriptmysqlnode.jsapiexpress

Tips for effectively removing objects from a PixiJS application

I have embarked on a game development project using Pixi.js that involves items falling from the top of the canvas. The functionality I've implemented so far allows items to spawn and move down the canvas until they reach the end of the window, at whi ...

javascripthtmlcanvaspixi.js

HTML validation produces mistakes

I encountered an issue when using Google Fonts and received the following error related to a specific link: <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Mer ...

htmlcssfontsw3c-validation

I need help figuring out how to choose an option from a drop-down menu that has a dynamically changing id every

When using Selenium Webdriver, I am trying to select the "802.11n" option from a drop-down menu where the "sbSelector_xxx" id changes each time the page is reloaded. <div id="RADIO_5GHz_adv" style="display: block;"> <table class="block" border="0 ...

pythonhtmlseleniumselenium-webdriver

Disable menu bar | customize menu bar in electronJS

I am developing an Angular application with Electron.js. Due to the specific design requirements of my app, which is browser-based, I do not require or want the default Electron.js menu or menu bar to be displayed. Is there a way to remove it from my app ...

javascriptangularmenuelectronmenubar

The imported font used in Firefox is displaying with a striking underline text-decoration

I am currently using the Cardiff font in a project and attempting to apply the style text-decoration:underline to it. While this works perfectly in Chrome (Version 35.0.1916.114), in Firefox (Version. 29.0.1) the underline appears to be crossing through t ...

cssfont-faceunderline

Utilize select2 for dynamically loading an external html component

When the page is loaded, it includes another HTML page with a select element that I want to style using select2. The basic page structure looks like this: <select class="selectAddItem" id="selectAddItem" name="selectAddItem" style="width: 150px;" clas ...

javascriptjqueryajaxjquery-select2

Showing the total quantity of products, reminiscent of a virtual shopping basket

I am trying to show a number similar to how a shopping cart displays items. The php code I was given currently shows a cookie value, which is mostly functional. However, if you encounter errors while adding items to the cart, it increases the cookie count ...

javascriptphphtmlangularjsshopping-cart

Implementing an event listener on an anchor element dynamically inserted through Javascript

I made an Ajax call that retrieves a list of movie titles. I am trying to click on a button next to each title in order to add it to my "currently watching" list. However, my "add" link is not responding to the event handler. What steps can I take to suc ...

javascriptjqueryajax

Tips for creating a flexible Cell component in react-big-calendar:

Is there a way to make the cell of react-big-calendar flexible depending on the number of events, and enable scrolling? Here is a screenshot showcasing my issue: https://i.stack.imgur.com/K2h69.jpg ...

javascriptreactjsreact-big-calendar

Include an item in a Vuetify model's array of objects

Currently, I am attempting to store the value of a dynamically loaded radio button into an array of objects. These radio buttons serve as options for a set of questions within a form, and my desired output is as follows: [{"question1":{ " ...

javascriptvue.jsvuetify.jsv-model

No display of Tailwind updates on local server in Safari browser using NextJS and a Mac M1

For my personal project with NextJS, I am using Tailwind CSS, but I am experiencing frequent issues with updating styles. It seems like there is a 50/50 chance that Tailwind will apply the styles to the component properly, and sometimes I have to go throug ...

cssreactjsnext.jstailwind-css

Angular's responsiveness is enhanced by CSS Grid technology

I am attempting to integrate a CSS grid template that should function in the following manner: Columns with equal width 1st and 3rd rows - 2 columns 2nd row - 3 columns https://i.sstatic.net/aQyNR.png Order = [{ details:[ { ke ...

cssangulargridviewdatagridviewcolumn

I've exhausted all options from stackoverflow with no success. Google Chrome's Autofill feature is wreaking havoc on my theme. Any suggestions on how to tackle this issue?

I designed a template with a stunning CSS layout. All I want is to have a transparent background with white font color, but Google Chrome seems to be causing issues with my theme. What steps should I take? I've exhausted all resources available onlin ...

htmlcssgoogle-chrome

My media queries refuse to cooperate until I add the magical "!important" declaration

Utilizing Bootstrap 4 along with a custom CSS file on my website. Within the CSS file, I have included some media queries at the bottom: @media (max-width: 575px) { .address .contact { text-align: center; } } /* Small devices (tablets, 768px and ...

cssbootstrap-4media-queries

Using PHP to extract all occurrences of window.location from an HTML document using regex

Is there a way to extract all the window.location instances in PHP? I have a list of URLs that I am fetching using cURL, saving the HTML content as a string, and now I need to identify and display all the occurrences of window.location separately. I atte ...

javascriptphpregex