Is there a way to modify CSS styles for a child tag element after hovering over its parent?

Question

Is there a way to modify CSS styles for a child tag element after hovering over its parent?

Here are my HTML code segments:

<div class="div-builder">
    <div>
        <a href="#">
            <img src="/photos/20/Apple-Logo-icon.png" width="50" alt="Logo">
        </a>
        <h3>Title</h3>
        <i>sub-title</i>
    </div>
    <hr/>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting ...</p>
</div>

I want to create a hover effect for the .div-builder class where its background color changes according to this CSS:

.div-builder{ background-color: lightyellow; }

The desired result should look like the image shown in this link:

In addition, when hovering over the <img> tag, I also want its background color to change to lightyellow without affecting the .div-builder class. The result should be similar to the image in this link:

The <img> tag can be at any level within the .div-builder class. Similarly, the <h3>, <i>, or <p> tag should change their background color to lightyellow on hover, with the .div-builder class background color remaining unchanged. After hovering over the <p> tag, the result should resemble the image here:

Is there a way to achieve this hover effect using CSS?

Alternatively, how can I implement this click event instead of a hover effect using jQuery?

jquery html css hover click

Answer 1

Answer №1

Hey there! Check out this answer I put together for you. Here is the link

function hoverEffect() {
      $(".div-builder")
        .find("h3,i,p,img,a")
        .hover(
          function () {
            $(this).css("background", "SpringGreen");
            $(".div-builder").css("background", "initial");
          },
          function () {
            $(this).css("background", "initial");
            $(".div-builder").css("background", "SpringGreen");
          }
        );
    }
    function resetHover() {
      $(".div-builder").css("background", "initial");
    }

<div class="div-builder" onmouseenter="hoverEffect()" onmouseleave="resetHover()">
      <div>
        <a href="#" width="100%">
          <img src="https://picsum.photos/id/4/300" alt="Logo">
        </a>
        <h3 class="">Title</h3>
        <i>sub-title</i>
      </div>
      <hr />
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting ...</p>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Hey there! Check out this answer I put together for you. Here is the link

function hoverEffect() {
      $(".div-builder")
        .find("h3,i,p,img,a")
        .hover(
          function () {
            $(this).css("background", "SpringGreen");
            $(".div-builder").css("background", "initial");
          },
          function () {
            $(this).css("background", "initial");
            $(".div-builder").css("background", "SpringGreen");
          }
        );
    }
    function resetHover() {
      $(".div-builder").css("background", "initial");
    }

<div class="div-builder" onmouseenter="hoverEffect()" onmouseleave="resetHover()">
      <div>
        <a href="#" width="100%">
          <img src="https://picsum.photos/id/4/300" alt="Logo">
        </a>
        <h3 class="">Title</h3>
        <i>sub-title</i>
      </div>
      <hr />
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting ...</p>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

Answer №2

Is this the style you're looking for?

body {
    background-color: rgba(173, 173, 173, 0.9);
}


.div-builder {
    background: white;
}

.div-builder div:hover {
    background: red;
}

    <div class="div-builder">
        <div>
            <a href="#">
                <img src="https://static.javatpoint.com/htmlpages/images/html-tutorial.png" alt="Logo">
            </a>
        </div>
        <div>
            <h3>Title</h3>
        </div>

    <div>
         <i>sub-title</i>    
    </div>
        <hr/>
        <div>
            <p>Lorem Ispsum is simply dummy text of the printing and typesetting ...</p>
        </div>
    </div>

Answer 4

Is this the style you're looking for?

body {
    background-color: rgba(173, 173, 173, 0.9);
}


.div-builder {
    background: white;
}

.div-builder div:hover {
    background: red;
}

    <div class="div-builder">
        <div>
            <a href="#">
                <img src="https://static.javatpoint.com/htmlpages/images/html-tutorial.png" alt="Logo">
            </a>
        </div>
        <div>
            <h3>Title</h3>
        </div>

    <div>
         <i>sub-title</i>    
    </div>
        <hr/>
        <div>
            <p>Lorem Ispsum is simply dummy text of the printing and typesetting ...</p>
        </div>
    </div>

Answer 5

Answer №3

If I understand correctly, your objective is to change the background of an element when hovering over it with the cursor. Achieving this is a simple task: It can be done using CSS by adding ":hover" to the CSS properties. For example, for a paragraph (p):

 p:hover {
      background-color: blue;
      font-size: 18px;
 }

Done! You can change the "p" selector to any ID or class you prefer.

See an example of changing background on hover. I hope this explanation was helpful.

If you want to change multiple elements at once when hovering over one:

.hoverThis:hover { background: green; }

Wrap the elements with a div container:

<div  class="hoverThis">
<p>This text will have a green background when hovered over.</p>
<p>And so will this one!</p>
</div>

Answer 6

If I understand correctly, your objective is to change the background of an element when hovering over it with the cursor. Achieving this is a simple task: It can be done using CSS by adding ":hover" to the CSS properties. For example, for a paragraph (p):

 p:hover {
      background-color: blue;
      font-size: 18px;
 }

Done! You can change the "p" selector to any ID or class you prefer.

See an example of changing background on hover. I hope this explanation was helpful.

If you want to change multiple elements at once when hovering over one:

.hoverThis:hover { background: green; }

Wrap the elements with a div container:

<div  class="hoverThis">
<p>This text will have a green background when hovered over.</p>
<p>And so will this one!</p>
</div>

Is there a way to modify CSS styles for a child tag element after hovering over its parent?

Answer №1

Answer №2

Answer №3

Similar questions

Verifying the angular form without the need for a submit button

Unexpected behavior occurs when ajax is added to an array for jQuery promise results

php json with multiple dimensions

How can I prevent my JSON object from serializing .NET nulls as "null" for object members?

Converting Variable Values to Element IDs in JavaScript: A Helpful Guide

Tracking monthly expenses in Yii2: Tips on managing your finances

Having difficulty aligning ListItem to the right within a List

Having trouble with blueprintjs icons not appearing as they should on certain pages

Combining Three HTML Tags Into a Single Page

Guide to Utilizing an AJAX Call to Populate a Line Graph in Highcharts

Angular 8: ISSUE TypeError: Unable to access the 'invalid' property of an undefined variable

NodeJS instructs open(html) to execute first before any other code is executed

Verify if a request attribute has been established using jQuery

Tips for maintaining grid width when columns are rearranged in the column menu

What steps should be taken to incorporate a user input space similar to the one found in the Wordpress new post section

Nightwatch is a tool that allows you to interact with elements on a webpage by clicking on an element within

The functionality of jQuery touch events on iOS devices is not functioning properly

Displaying two paginated lists on a single page in a Rails application

What is the best way to incorporate polling into the code provided below? I specifically need to retrieve data from the given URL every 60 seconds. How should I go about achieving this

Implement a slideshow feature that automatically changes a CSS attribute when preview images are shown