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: https://i.sstatic.net/U1PRe.jpg

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: https://i.sstatic.net/PXt5E.jpg

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: https://i.sstatic.net/KaXes.jpg

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

AngularJS: Utilizing ellipsis for text overflow and optimization

Learn how to implement JavaScript code that allows a video to start playing only upon clicking a specific button

After the successful completion of the AJAX request, I aim to transmit the identification data via the

Is it possible to dynamically change an ngModel value directly from the component?

Transforming the appearance of the menu element in Vue using transitions

display information in a structured table format

Article discussing the Facebook like button

Show images dynamically with the help of Flask

What could be causing the issue with my Date and Time input not functioning correctly?

Navigation that sticks and changes upon hovering over div elements

Internet Explorer 11's default document view mode now automatically switches to Edge viewing

The value entered is displaying as not defined

Having trouble accessing the iframe element in an Angular controller through a directive

How can you load elements via AJAX?

JavaScript: How can I remove it when I click anywhere on the webpage with onClick?

Is there a way to make my for loop search for the specific element id that I have clicked on?

Modify an HTML table and record any modifications as POST requests using Javascript

Opacity of background color only applies to the color

Issue at hand: Unexpected error 500 encountered while sending AJAX request to PHP script through

Refresh a separate table following an insertion by utilizing a jQuery button coupled with PHP 7