Trigger parent element based on child hover

Imagine having a structure like this:

<div class="bigWrap">
            <div class="element">
                ...
                <div class="HoverThisElement"></div>
                ...
            </div>
            <div class="element">
                ...
                <div class="HoverThisElement"></div>
                ...
            </div>
            <div class="element">
                ...
                <div class="HoverThisElement"></div>
                ...
            </div>
        </div>

If I want to style the .element when its child .HoverThisElement is hovered, how can I achieve that? Please provide an example using SASS if possible.

htmlcsssass

Answer №1

As mentioned by "little_coder," there is a way to trick this.

For those looking to support IE10 (which does not have pointer-events support), one workaround is to use an overlay DIV and target it with the sibling selector. Alternatively, a pseudo-element could also be used for this purpose.

.overlay {
        position: absolute;
        background-color: red;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        transition: all .3s;
    }

    .HoverThisElement {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 50px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: yellow;
        z-index: 3;

        &:hover {
            + .overlay {
                right: 200px;
            }
        }
    }

Check out this CodePen demo for reference.

Answer №2

One way to work around this issue is by utilizing CSS and the pointer-events property.

.element {
  background: red;
  padding: 10px;
  margin: 10px;
  pointer-events: none;
}

.HoverThisElement {
  background: yellow;
  padding: 15px;
  pointer-events: auto;
}

.element:hover {
  background: green; //add some styles you want to parent element
}
<div class="bigWrap">
  <div class="element">

    <div class="HoverThisElement"></div>

  </div>
  <div class="element">

    <div class="HoverThisElement"></div>

  </div>
  <div class="element">

    <div class="HoverThisElement"></div>

  </div>
</div>

Answer №3

Unfortunately, CSS lack parent selectors which makes it impossible to achieve that directly in CSS.

If achieving this is necessary, the alternative solution would be to employ JavaScript.

Answer №4

According to Logan, there is no parent selector available. To achieve the desired effect, you can use the following approach: when hovering over "HoverThisElement," add the class "active" to the closest "element," and remove the active class when the mouse moves out.

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

Guide to extracting a specific value from a JSON object with JavaScript

When working with JavaScript and fetching data from an API, the structure of the data retrieved may look something like this: [{ "word":"gentleman", "score":42722, "tags":["syn","n"] }, { "word":"serviceman", "score":38277, "tags":[ ...

javascripthtmlapiloopsfor-loop

Integrating my HTML-CSS layout into a Ruby on Rails framework

After creating a web page template using a combination of HTML, Bootstrap, and CSS, I am now looking to see it in action on my Rails application. I need guidance on how to accomplish this step by step. Can anyone provide assistance on what steps need to ...

htmlcssruby-on-rails

Is there a way to enable text selection on a jQuery draggable div?

I utilized jQuery to make a specific div draggable, but I've encountered an issue. Inside this draggable box, there is some important text that I need to be able to copy and paste. However, whenever I click on the box, it triggers the dragging action ...

javascriptjqueryhtml

When clicking on a div with the CSS property user-select set to none, the selected text in a contenteditable element is

I'm currently working on a unique JavaScript rich text editor that utilizes div elements with the CSS property user-select: none instead of traditional buttons. While this approach works perfectly in Firefox, I've encountered a major issue with G ...

htmlcssgoogle-chromecontenteditable

Looking for an effective method to implement CSS styling within a list cell in JavaFX?

As a beginner in JavaFX with limited knowledge of CSS, I struggled to conduct proper research and provide relevant information here. I apologize for any confusion or duplication. I am seeking a solution to apply CSS to JavaFX controls, specifically in a Li ...

javacssjavafx

Get rid of irritating photo borders

It's a mystery to me why no one seems to have the answer to this question. Take a look at . The spacer images are surrounded by borders. While I could use empty divs instead of spacer images, I'm using them here to make a point. This issue also ...

htmlcss

What is the best way to ensure jQuery loads before CSS code on a website

I am currently working on a blog project that allows visitors to customize the background color by simply clicking on one of five available buttons. $(function(){ //Checking if a color scheme has already been selected var chosenColor = ...

javascriptjqueryhtmlcss

When utilizing content: url() for a local image, it does not show up, whereas it will display for a web URL. What could be causing this discrepancy

I'm attempting to convert this image into a button. It works fine when acquiring the image through a website URL (not from my own website), but it doesn't work when using a relative path. The image just won't show up. For instance: .my-cla ...

htmlcss

unable to choose the radio option

Encountering an unusual problem with the radio buttons due to custom styling. The issue arises when trying to select certain options. Here is the jsfiddle link for reference: http://jsfiddle.net/bm6Lfhdz/1/ Attempt to choose 'Yes' from the secon ...

javascripthtmlcssradio-button

Help with enabling the recognition of backspace key in JavaScript?

My current JavaScript is almost perfect but missing one key element. The form has two fields that are disabled when the user fills it out. <label>Can you drive? </label> <input type="booleam" id="drive" disabled><br> <label>W ...

javascripthtml

What is the best way to ensure the options/choices div reaches its ideal width?

Check out my StackBlitz project that I've set up In the styles.css file, you'll notice that I defined a fixed width of 650px for the option dropdown div, which is currently working fine @import '~bootstrap/dist/css/bootstrap.min.css'; ...

javascriptcsstwitter-bootstrapbootstrap-4choices.js

Tips on managing multiple form data using ajax for php backend

<input type="text" value="2021-05-01" class="date" name="date"> <input type="text" value="10:00" class="starttime" name="starttime"> ...

phphtmljqueryajax

Leveraging variables retrieved from an asynchronous operation within an Angular template

After logging in, I am trying to retrieve user details but facing delays in getting the data. This issue seems to be caused by an undefined variable at the moment the template loads. How can I prevent this from happening? onLogin() { if (this.loginPass ...

htmlangulartypescript

Guide on adding space between rows in a table using HTML and Bootstrap 5

In the current table containing my content, it appears like this: https://i.sstatic.net/Mm7qT.png. I wish to add space between each row to create distinct separation and achieve a look similar to this: https://i.sstatic.net/ARgR1.png I experimented with ...

htmlcssdatatablesbootstrap-5

Is there a way to store a class property as a variable using PostCSS?

Looking to store a dynamic property in a variable for use with calc(). There is a class with a height that changes dynamically. .cuerpo-detalle { height: x; } The goal is to create a variable that captures the height property of the .cuerpodetalle cla ...

javascriptcsspostcsscssnext

Is there a way to automatically populate my form with data depending on the value selected in a dropdown menu?

I'm facing an issue with prefilling a form based on the selected value from a dropdown menu that loads invoice IDs from my database. The problem arises when trying to populate the form fields using the data corresponding to the selected invoice ID. Th ...

javascriptphpjqueryhtmlmysql

Image fails to download on Safari and iPhones in PHP

Can anyone help me figure out why images are opening in a new window instead of downloading inside Chrome and Firefox on my iPhone? ...

phphtmlwordpress

Triggers the request for Windows authentication when accessing a webpage on a website

Whenever I attempt to access a specific page on my website, a login screen pops up asking for my username and password. Even after entering the correct credentials and clicking OK or Cancel, the page still loads as normal. I can't figure out why this ...

asp.netiiswindows-authenticationhtml

Code Styling within Components of a React Application

I'm struggling with setting up inline CSS styles in my React App. I want to dynamically change the background color of my cards based on data in an array, but so far have been unsuccessful. I've created a variable with a switch statement and pass ...

javascriptcssreactjs

Encountering blank space in the first table row after a page break when creating a PDF using dompdf

Encountered a strange bug while working with dompdf for PDF generation. The issue arises when a page break occurs within a table. Subsequent to the break, the first tr on the next page displays an odd empty space on the left side (as depicted in the image ...

phphtmlcsspdfdompdf