Is it possible to change the style of an element when I hover over one of its children?

Encountered an issue while working with HTML and CSS:

//HTML

<div>
    <div class="sibling-hover">hover over me</div>
</div>

<div class="parent">
    <div>should disappear</div>
</div>

//CSS

.sibling-hover:hover .parent {
    display:none;
}

Despite the code snippet, the "parent" div doesn't disappear when hovering over the "sibling-hover" child. The attempted solutions like .sibling-hover:hover ~ .parent, .sibling-hover:hover + .parent, and 

.sibling-hover:hover > .parent
didn't work as intended. Curious if there's a reason for this limitation, and considering using JavaScript instead.

javascripthtmlcss

Answer №1

It seems like there might be a misunderstanding in your explanation ... the ~ (sibling) selector actually requires siblings to exist under a common parent element for it to work properly. Take a look at the example below.

HTML

<div> <!-- This is the parent div -->
  
  <div class="sibling-hover"> 
    hover over me
  </div>

  <div class="parent">
    should disappear
  </div>
  
</div>

CSS

.sibling-hover:hover ~ .parent {
    display: none;
}

Your CSS code is correct if your HTML structure follows something similar to this.

HTML

<div><!-- I am the parent div -->
    <div class="sibling-hover"><!-- I am under the parent -->
      hover over me
      <div class="parent"><!-- I am under sibling-hover (which is my parent element) -->
        should disappear
      </div>
    </div>
</div>

CSS

.sibling-hover:hover .parent {
    display: none;
}

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

Using VB.NET with Selenium to locate and interact with dropdown elements

My knowledge of selenium is limited, and I'm facing difficulty in selecting an element from a dropdown menu on AliExpress using vb.net. The issue arises when the driver either fails to locate the intended element or finds another element with the same ...

html.netvb.netseleniumselenium-webdriver

Is it possible to access the operating system's native emoji picker directly from a website?

While there are numerous javascript plugins and libraries available for allowing users to select emojis for text inputs, both Windows and Mac operating systems already have their own native emoji pickers accessible via ⊞ Win. or CTRL⌘Space. Is there a ...

javascripthtml

I am looking to execute a MySQL query using a value entered into a text box

$query="SELECT * FROM table1 where name='Vidya'"; My text field is ready to capture input. <input type='hidden' value='<?php echo $query;?>' id='getsearchquery' name='getsearchquery'> When I ...

phpjqueryhtmlajax

Feeling lost when it comes to forms and hitting that submit button?

Below is a sample form structure: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST"> <div align="center"> <br><br; <br& ...

javascripthtmlcss

What is preventing the click function on a dynamically created button from being executed in jQuery?

Take a look at this jsFiddle where I illustrate my issue. Whenever I click on the "Add an ingredient" button, the button click event is triggered. My issue arises when I click on the "Create a subtitle" button because it dynamically creates "Add an ingredi ...

javascriptjqueryhtmlbutton

invoking a function at a designated interval

I am currently working on a mobile application built with Ionic and TypeScript. My goal is to continuously update the user's location every 10 minutes. My approach involves calling a function at regular intervals, like this: function updateUserLocat ...

javascripttypescriptionic-framework

Unique syntax using markdown-react

I want to customize the syntax highlighting in react-markdown. Specifically, I would like to change the color of text inside {{ }} to blue while still maintaining the correct formatting for other elements, such as ## Header {{ }} import React from " ...

javascriptreactjsregexremarkjsreact-markdown

What is the best way to remove table cells from a TableBody?

Currently, I am in the process of designing a table to display data retrieved from my backend server. To accomplish this, I have opted to utilize the Table component provided by Material UI. The data I retrieve may either be empty or contain an object. My ...

javascriptcssreactjshtml-tablematerial-ui

The background gently fades away, directing all attention to the popup form/element

After extensive searching, I have yet to find a straightforward solution that seems to be a standard practice on the web. My goal is to create a form that appears in the center of the screen when a button is clicked using CSS or jQuery. I would like the ...

javascriptjquerycss

Utilizing Loops in a React Component's Function

(React web app development) I am currently working on a project where I need to check the stock status of products using their IDs in a JSON data loop. However, I am facing an issue with the condition checking for the ID match, as it always seems to return ...

javascriptreactjs

Incorporate a collection of product titles along with their short forms in JavaScript/jQuery

Seeking guidance as a newcomer to JS. I have encountered the need for two different views in an application I am working on - one displaying full product names and the other showing only their abbreviations. Instead of hard-coding this information, I wish ...

javascriptjquery

What is the best way to simulate a library in jest?

Currently, I am attempting to simulate the file-type library within a jest test scenario. Within my javascript document, this particular library is utilized in the subsequent manner: import * as fileType from 'file-type'; .... const uploadedFil ...

javascriptreactjsmockingjestjsenzyme

AngularJS: Pause the data binding functionality temporarily

How can I temporarily deactivate data binding in AngularJS? I am working with a list called items that is being displayed using ng-repeat. I need to perform some operations on this list without immediately updating the page, as this could cause slowdown. ...

javascriptangularjs

Is Firebug a necessary tool for the functioning of my website?

I'm currently tackling a new project that involves complex javascript development. Unfortunately, I am unable to share any code specifics at this time. Initially, my script functioned correctly in Firefox 3.0 but encountered issues when tested on Fir ...

javascripterror-handlingfirebugfirefox3.5

Error: Attempting to create a Discord bot results in a TypeError because the property 'id' is undefined

While working on a basic Discord bot, I encountered an issue when running the -setcaps command. The error message I received was: TypeError: Cannot read property 'id' of undefined. I'm unsure about what might be causing this error. Any a ...

javascriptnode.jsbotsdiscorddiscord.js

Arranging links in a horizontal line (JSFiddle)

CodePen: https://codepen.io/example/abc123 I am attempting to align the elements "Favourite", "0", and "Reply" next to each other so they appear as: Favourite 0 Reply ...

cssasp.net

Retrieve distinct keys from a JSON file in Node.js

Below is an example of JSON data: [ { "Name": "User1", "primaryRegion": "US" }, { "Name": "user2", "primaryRegion": "US" }, { "Name": &q ...

javascriptnode.jsjson

Issue with variable not being refreshed within requestJS's data event

I have been attempting to store the response from a URL in a variable for caching purposes and then send it upon subsequent requests. I am currently writing to the variable during the data event of the request. The variable does get updated, but I am encou ...

javascriptnode.jsexpressscoping

Modify the bootstrap form dynamically in response to the user's input. Update the form layout instantly as the user types, with no need for clicking any buttons

Imagine a scenario where, as soon as you enter your credit card number, the form automatically undergoes a change without requiring a button click, similar to how a credit card logo pops up. The form detects changes instantly after the input field has be ...

javascripthtmlangularjsnode.jstwitter-bootstrap-3

What is the best way to place an icon in the center of a Bootstrap 5 card image?

I'm looking to center an icon within a bootstrap-5 card image. I have an icon that I want to display at the center of my card image, but I'm unsure how to achieve this using either CSS or Bootstrap-5. Can anyone provide guidance on how to accompl ...

cssbootstrap-5