Change the parent's color when the child is hovered over

Question

Change the parent's color when the child is hovered over

head has no background and the color is black. On mouseover, its color changes to white with a black background, so far so good but

When I hover over content, I want to change the color of head. How can I achieve this? Is it possible using only CSS?

 <ul id="meg">
   <li><a href="#">head</a>
    <div>
    <h2>sub head</h2>
    <p><a href="#">content</a></p>
    <p><a href="#">content</a></p>
     </div>
    </li>
 <li><a href="#">head</a>
    <div>
    <h2>sub head</h2>
    <p><a href="#">content</a></p>
    <p><a href="#">content</a></p>
     </div>
    </li>
</ul>

html css html-lists onmouseover

Answer 1

Answer №1

If you're looking to achieve this using JavaScript, I can help guide you in the right direction. Here's a sample code snippet that attempts to address what you may be trying to accomplish:

<!DOCTYPE html> 
<html>
<head>
<script type="text/javascript">  
function customizeListItems(){
   var listItems = document.getElementsByTagName('li');
   for (var i = 0; i < listItems.length; i++) {
        var item = listItems[i];     
        item.firstChild.style.color = 'white';
        item.firstChild.style.backgroundColor= 'black';
    }
}
</script>
</head>
<body>
  <ul id="myList">
    <li>
       <a href="#">Header</a>
       <div>
          <h2>Sub Header</h2>
          <p><a href="#" onmouseover="customizeListItems()">Content</a></p>
       </div>
    </li>
  </ul>
</body>
</html>

Answer 2

If you're looking to achieve this using JavaScript, I can help guide you in the right direction. Here's a sample code snippet that attempts to address what you may be trying to accomplish:

<!DOCTYPE html> 
<html>
<head>
<script type="text/javascript">  
function customizeListItems(){
   var listItems = document.getElementsByTagName('li');
   for (var i = 0; i < listItems.length; i++) {
        var item = listItems[i];     
        item.firstChild.style.color = 'white';
        item.firstChild.style.backgroundColor= 'black';
    }
}
</script>
</head>
<body>
  <ul id="myList">
    <li>
       <a href="#">Header</a>
       <div>
          <h2>Sub Header</h2>
          <p><a href="#" onmouseover="customizeListItems()">Content</a></p>
       </div>
    </li>
  </ul>
</body>
</html>

Answer 3

Answer №2

It is possible that this method will work. Typically, CSS affects elements after the closing tag, not before it. Therefore, this approach seems to reverse the usual "+" method often used for such purposes.

<style type="text/css">
   #content:hover - #head { background-color: black; color: white; }
  </style>

 <ul id="meg">
   <div id="head">
   <li><a href="#">head</a>
   </div>
   <div id="content">
    <h2>su head</h2>
    <p><a href="#">content</a></p>
    <p><a href="#">content</a></p>
     </div>
    </li>
    </ul>

Answer 4

It is possible that this method will work. Typically, CSS affects elements after the closing tag, not before it. Therefore, this approach seems to reverse the usual "+" method often used for such purposes.

<style type="text/css">
   #content:hover - #head { background-color: black; color: white; }
  </style>

 <ul id="meg">
   <div id="head">
   <li><a href="#">head</a>
   </div>
   <div id="content">
    <h2>su head</h2>
    <p><a href="#">content</a></p>
    <p><a href="#">content</a></p>
     </div>
    </li>
    </ul>

Answer 5

Answer №3

Did you test out the styling for #meg li a:hover { background-color:#000;color:#FFF; }

Answer 6

Did you test out the styling for #meg li a:hover { background-color:#000;color:#FFF; }

Change the parent's color when the child is hovered over

Answer №1

Answer №2

Answer №3

Similar questions

Printing dynamic data

Tips for validating user input in AngularJS without using a form tag

I'm having trouble with my code not fitting all screen resolutions. I usually code on a Macbook, but recently switched to a Windows computer and now everything is out of whack

Is it possible for me to utilize a type of CSS variables?

"Encountering a Javascript issue while trying to apply a CSS class to a

How can I troubleshoot the unresponsive remove div function on my website?

What is the best way to load content into Bootstrap tabs?

Unable to create a clickable button within a CSS3DObject using Three.js

Using an onclick function to increment and decrement values

What is the best way to ensure a table is responsive while maintaining a fixed header? This would involve the table scrolling when it reaches the maximum viewpoint, while also keeping

Plugin for creating a navigation bar with a jQuery and Outlook-inspired style

difficulties with struts2 user interface elements

Four unique classes will each be styled differently using pseudo selectors

Is it possible to implement a custom icon for pagination in Material UI?

How can I incorporate margins or adjust scaling within dompdf?

Arranging Data in an HTML Table Using TableSorter

Ways to update div content following a successful AJAX call

A method to apply a class to the third <li> element using javascript

Turn off HTML5 Audio

What is the best approach for promoting reusability in Angular: creating a new CSS class or a new component?