Guide on enabling hover effect for a child element inside a parent element

I am trying to customize the appearance of individual list image elements that are nested within a separate div:

<div class="hr-one">
                <hr>
                <div id="wrapper">
                    <ul id="scene">
                        <h3 class="accredited-text">Accredited suppliers and installers of</h3>
                        <li class="layer" data-depth=".1"><img class="revov-logo" src="../AdditionalResources/Images/revov-logo.png"></li>
                        <li class="layer" data-depth=".1"><img class="victron-logo" src="../AdditionalResources/Images/victron-energy-logo.png"></li>
                        <li class="layer" data-depth=".1"><img class="fronius-logo" src="../AdditionalResources/Images/Fonius-Logo_SunrunSolar.png"></li>
                        <li class="layer" data-depth=".1"><img class="byd-logo" src="../AdditionalResources/Images/BuildYourDreams.svg.png"></li>
                        <li class="layer" data-depth=".1"><img class="canadian-logo" src="../AdditionalResources/Images/336-3369122_canadian-solar-canadian-solar-logo-png-clipart.png"></li>
                        <li class="layer" data-depth=".1"><img class="schneider-logo" src="../AdditionalResources/Images/Schneider_Electric-Logo.wine.png"></li>
                        <li class="layer" data-depth=".1"><img class="sunsynk-logo" src="../AdditionalResources/Images/Sunsynk Logo.png"></li>
                        <li class="layer" data-depth=".1"><img class="zbeny-logo" src="../AdditionalResources/Images/logo_beny-d61b60a5043c816521296244ad5dbe8fbf681bfe65b11669c1fb7ea0eb857cc7.png"></li>
                        <li class="layer" data-depth=".1"><img class="eaton-logo" src="../AdditionalResources/Images/eaton-logo-mobile.png"></li>
                    </ul>
                </div>
            </div>

So, I would like to hover directly over any of the images, such as 'revov-logo,' 'byd-logo,' 'eaton-logo,' etc., and activate the respective hover effect only when hovering over that particular image.

Here is my CSS:

.eaton-logo {
        width: 17%;
        margin-left: 132%;
        margin-top: 26.5%;
        opacity: 0.4;
        transition: 0.3s;
        filter: grayscale(100%);
    }

    .hr-one:hover .eaton-logo {
        opacity: 1;
        filter: grayscale(0%);
        width: 19%;
    }

The above code works, but it activates all the images' hover properties simultaneously when hovering over the entire div, rather than each specific image individually.

htmlcsshover

Answer №1

After trying out the provided solution, I noticed that hovering over the entire div triggered the effect.

It seems like the desired behavior was achieved as per your request.

.hr-one:hover

To ensure accurate targeting, apply the :hover pseudo-class to specific logo classes individually.

.hr-one .eaton-logo:hover

Hopefully, this adjustment resolves the issue effectively.

Answer №2

To enhance the appearance of your images on hover, apply the :hover pseudo-class to the .layer class within your <li> elements. Then use the img selector to style the images when the .layer class is hovered over:

.layer:hover img {
    opacity: 1;
    filter: grayscale(0%);
    width: 19%;
}

If you want to target each individual img element, replace img with your specific image classes within the hover state styles:

.layer:hover .byd-logo {
    opacity: .8;
    filter: grayscale(50%);
}
.layer:hover .eaton-logo {
    opacity: 1;
    filter: grayscale(0%);
    width: 19%;
}

This ensures that if you decide to add text to your images, only the specific image within the hovered <li> will be affected by the greyscale effect when hovered.

Additionally, remember to place your <h3> element before the <ul> in your HTML structure as per HTML5 standards, separate from it and not nested inside, for better conformity.

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

The Material UI ToolTip displays inaccurately when placed within a container that has overflow scroll enabled

Within my ReactJS application, I have implemented a list of Material UI ToolTips with IconButtons nested inside a div element featuring overflow: scroll. One specific row displays the Material UI ToolTip in the following manner: <ClickAwayListener onCl ...

javascripthtmlcssreactjsmaterial-ui

Ensure that the pop-up text triggered by a button click is contained within the same webpage

Allow me to preface my inquiry by mentioning that I possess very minimal coding knowledge, so please bear with any technical terminology inaccuracies. I currently have a webpage featuring various questions, each accompanied by a button below. Upon clickin ...

javascriptphphtml

The excessive width of the navigation bar resulted in additional blank space on the right side of

My navigation bar is causing me trouble as it appears to be too wide, creating extra space on the right side. I've tried adjusting the width with some code, but as I'm working on making the site responsive, shrinking the code down to around 320px ...

htmlcssnav

Update the href property in the provided JSFiddle code to enable the integration of YouTube videos with Fancybox

After upgrading from Fancybox 1.3.4 to Fancybox 2.1.4, I've encountered issues with the href property not working correctly with my YouTube videos. If you could take a moment to review this functioning jsfiddle that I'm attempting to edit. Esse ...

jqueryhtmlyoutubefancyboxfancybox-2

Stop SVG Text from Rotating using CSS

I designed an SVG circle containing text and now I would like to apply a CSS transform to rotate the SVG, but without rotating the text element. .progress { webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .progress__value { stroke-d ...

htmlcsssvg

Regular Expressions for Password Validation in JavaScript

I'm seeking assistance in developing a regex pattern for a password. The password should consist of letters, numbers, underscores ( _ ), dollar signs ( $ ), and hyphens ( - ). It must be between 3 to 30 characters long. ...

javascriptregexhtml

A guide on iterating and accessing Vue data in a loop

I am looking to iterate through my code in order to extract the value of each form input. This is to ultimately display a total score and severity score based on the user's inputs. The total score will count the number of symptoms present (0-3), while ...

javascripthtmlvue.js

Image uploading in Angular is not compatible with Internet Explorer, however, it functions correctly in Google Chrome

As of now, my implementation has been successful in all browsers except for Internet Explorer 11. Despite being able to successfully upload .jpeg, .jpg, and .png images in Google Chrome, I am facing issues when trying to upload them in IE 11. The code wo ...

javascripthtmlarraysangularimage

What is the best way to determine the height of an element after new content has been added through AJAX?

I have been working with a Jquery Mobile page and I am facing an issue when loading a form via AJAX. The plugin I am using to set the page dimensions calculates them after the AJAX call has completed and the layout has been updated. However, the height of ...

javascriptjquerycssajaxheight

Overreaching line surpassing its containing box

I have a specific HTML setup that includes CSS styling for rows, circles, and lines: .row.justify-content-center div:last-child>div>div { display: none; } .line { width: 100%; height: 9px; margin-left: 16px; border-bottom: 2px solid l ...

htmlcssbootstrap-4

Tips for invoking a JavaScript function script through PHP

<?php echo "<script type='text/javascript'>error_warning('Error!'); </script>"; ?> <!DOCTYPE html> <html stuff> <div id="alert_box" class="alert"></div> < ...

javascriptphphtmlcss

In order for Firefox to properly recognize and apply the @font_face, it must be located in the root

I'm working on a website that has a custom font, and I've implemented the @font-face code as shown below: @font-face { font-family: 'webfontregular'; src: url('fonts/cracked-webfont.eot'); src: url('fonts/cra ...

htmlfirefoxcssfont-face

Unable to place the div/ul above a preceding div

I am having trouble setting up a menu of tabs. I want it to move up so that it is positioned just above the previous div. However, every time I try to move it up, it ends up going underneath the previous div. I have attempted to change the z-index but with ...

htmlcsscss-position

D3.js: Difficulty fitting the chart within my bootstrap div

Currently, I'm encountering a problem where the "card" component from Bootstrap is not adjusting responsively with my d3.chart. The screenshot below displays the outcome: https://i.sstatic.net/2MhBx.png Chart Code const sample = [ { languag ...

javascripthtmlcssd3.jsbootstrap-4

Looking to include a toggle button in the menu for both desktop and mobile versions using Bootstrap

When viewing the website on a mobile device, the menu appears as a toggle button. However, on desktop, the menu is displayed without the toggle. Is there a way to show the menu in a toggle button on the desktop version using Bootstrap? ...

jquerycsshtmlbootstrap-4

Adjust the text size of Twitter Bootstrap on mobile screens

I recently started using Twitter Bootstrap. I am currently hiding certain <tr> elements on phone screens by utilizing the class="hidden-phone". However, I am now looking to resize the displayed text to better fit the screen. Is there a way to adjus ...

htmlcsstwitter-bootstrapresponsive-design

Difficulty Aligning Header Elements - Combining Navigation and Logo on the Same Line

I am currently facing an issue with positioning a logo and navigation links within a <header> element. When I apply the CSS property text-align:center;, the logo aligns to the center on one line while the navigation links appear on another line direc ...

htmlcssresponsive-design

How can I use CSS to place a div at the bottom of its container?

I am trying to figure out how to use CSS to position a div at the bottom of its container, but the size of the container is not fixed. Can anyone provide some guidance on this issue? Thank you in advance for helping me solve this problem. You can check o ...

htmlcssbootstrap-4

Leveraging Javascript/jquery to retrieve image data for a specific frame within a video

Query My aim is to optimize the code for image manipulation on a web browser using JavaScript. One possible solution I am considering is utilizing a video file to reduce HTTP requests. Is there a way to extract a single frame from a video in png, jpg, or ...

javascriptjqueryhtmlvideo

Is it possible to utilize a function to manipulate the [checked] attribute of a checkbox and toggle it between true and false?

I'm trying to update the checkbox's [checked] property by calling a method, but even though the method is being called, the checkbox status doesn't change. HTML <div*ngFor="let vest_style of VEST_STYLE"> <input type="checkbox" ...

htmlangulartypescriptcheckboxchecked