Ways to modify attributes of a different element using hover in CSS

I am currently experimenting with modifying the styles of another element in CSS, but I'm unsure if I'm executing it correctly. Any guidance or suggestions would be greatly appreciated.

ul.drop-menu {
  opacity: 0.1;
}

nav > ul > li:hover ~ ul.drop-menu {
  opacity: 1;
}
<nav>
    <ul>
        <li>Example
            <ul class="drop-menu">
                <li class="1">Item 1</li>
                <li class="2">Item 2</li>
                <li class="3">Item 3</li>
                <li class="4">Item 4</li>
                <li class="5">Item 5</li>
                <li class="6">Item 6</li>
                <li class="7">Item 7</li>
            </ul>
        </li>
    </ul>
</nav>

htmlcss

Answer №1

~ is a symbol known as a "general sibling selector", it selects elements that are siblings appearing after the specified element in the selector.

If you wish to target any ul.drop-menu that is a child of li, simply remove the ~. Alternatively, if you specifically desire to target direct descendants, switch ~ to >. To illustrate this point, I have modified your selector and added an additional nested menu.

ul.drop-menu {
  opacity: 0.1;
}

nav > ul li:hover > ul.drop-menu {
  opacity: 1;
}
<nav>
  <ul>
    <li>Test
      <ul class="drop-menu">
        <li class="1">Test1</li>
        <li class="2">Test2
          <ul class="drop-menu">
            <li class="1">Test1</li>
            <li class="2">Test2</li>
            <li class="3">Test3</li>
            <li class="4">Test4</li>
            <li class="5">Test5</li>
            <li class="6">Test6</li>
            <li class="7">Test7</li>
          </ul>
        </li>
        <li class="3">Test3</li>
        <li class="4">Test4</li>
        <li class="5">Test5</li>
        <li class="6">Test6</li>
        <li class="7">Test7</li>
      </ul>
    </li>
  </ul>
</nav>

Answer №2

Make sure to replace > with ~. Here is an example:

ul.drop-menu {
  opacity: 0.1;
}

nav ~ ul ~ li:hover ~ ul.drop-menu {
  opacity: 1;
}
<nav>
    <ul>
        <li>Test
            <ul class="drop-menu">
                <li class="1">Test1</li>
                <li class="2">Test2</li>
                <li class="3">Test3</li>
                <li class="4">Test4</li>
                <li class="5">Test5</li>
                <li class="6">Test6</li>
                <li class="7">Test7</li>
            </ul>
        </li>
    </ul>
</nav>

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

Tips on achieving horizontal scrolling for div overflow instead of wrapping onto a new line

It's a frequent occurrence in mobile apps to have a navbar with selectable text options that overflow horizontally without breaking into a new line. Instead, users must scroll horizontally to access all the options available. Is there a way for me to ...

htmlcssreactjsuser-interfacefrontend

Error Encountered in Laravel 5.2 FormBuilder.php

Encountering Laravel 5.2 ErrorException in FormBuilder.php on line 1235 stating that the method 'style' does not exist. This error has me perplexed. I have already made updates to my composer.json file by adding "laravelcollective/html": "^5.2" ...

phpcsslaravel-5

Having trouble with Bootstrap-tour and Bootstrap 4 alpha 6? It seems like n.popover is not functioning properly

Attempting to integrate bootstrap-tour with bootstrap 4 and encountering the following error: Type Error: n.popover is not a function The code initialization looks like this: var tour = new Tour({ steps: [ { ...

javascriptcsstwitter-bootstraptwitter-bootstrap-4bootstrap-tour

Dropdown menu not appearing in specific containers when using HTML

I am creating a navigation menu that includes a dropdown link labeled "More." <a href="#"><div class="indiv_nav_button"><p class="font_18 white">Children</p></div></a> ...

htmlcssdropdown

Crafting a stylish vertical timeline using Tailwind and CSS: Step-by-step guide

I am attempting to design a timeline for a react app where odd children are displayed on the left side of the timeline and even children on the right side. Here is an image for reference: https://i.sstatic.net/YnNFU.png The issue I am facing is that I am ...

cssreactjstailwind-csstailwind-in-js

Having trouble with images not showing up properly when applying rounded CSS borders and opacity effects

Trying to solve a unique problem, I am seeking advice: On my website, I have included a 300 x 300 Pixel square png-image of a circle. Utilizing Zurb's Foundation 5.0.2 as a CSS Grid basis. My objective is to create a CSS-border around the circle and ...

htmlcss

How can I achieve a transparent background for a radio button in Chrome?

Today, I spent some time experimenting with the radio button to see if I could make its background transparent. I attempted the following CSS styling: input[type=radio] { background-color:transparent; background-image:none; -webkit-backface-v ...

htmlcss

Adjusting the text and background hues using JavaScript results in an immediate reversal

Attempting to dynamically change the text color and background color based on user input in the textbox. While it initially works, the color changes only flash for a brief moment before reverting back. <!DOCTYPE html> <html> <head> ...

javascripthtml

I'm currently utilizing CSS GRID to create a map layout, but I'm encountering an issue where the layout is not filling the entire screen. I'm wondering how I can achieve this in Angular

Here is the unique html code snippet for a layout that dynamically creates grids using json input: <!DOCTYPE html> <html lang="en"> <head> <title>Booking Page</title> </head> <body> <div ...

htmlcssangulartypescriptcss-grid

Ensure that the link's color remains constant and remove any styling of text-decoration

Attempting to create a customized header. My goal is to change the color and remove text decoration in the navbar. Below is my code snippet: ReactJS: import React from 'react'; import './Header.css'; function Header() { return ( ...

javascriptcssreactjs

What is preventing my HTML/CSS code from generating a button on the webpage?

There seems to be an issue with the image on my webpage - it's displaying a broken page icon instead of the actual image, even though it was showing fine before. The image name and location have not been changed. I'm also having trouble creating ...

htmlcssimage

What is the best way to add a centered progress spinner on top of an overlay?

Here is a code snippet that includes functionality to append a site overlay as needed. I am currently trying to implement the feature of also displaying an image progress spinner in the center of the screen over the overlay. I would prefer if this spinner ...

jquerycssoverlay

Alter the value of a parameter within a script tag with JavaScript/jQuery

Looking to dynamically change a parameter value using JavaScript or jQuery. Here is an example URL: www.exampleurl.com/somepage?foo=test I have a function that can extract the value after the 'foo' parameter: function getParameterByName(name, ...

javascriptjqueryhtml

utilizing a Bootstrap modal element throughout multiple HTML documents

I have a bootstrap modal dialog div that I want to use in all 4 html pages of my web application without repeating the code. I have a common JavaScript file for this purpose. What is the best way to achieve this? <!-- Modal --> <div class="modal ...

javascriptjquerycsstwitter-bootstrap

Tips for transferring a prop from a parent component to a child in Vue.js

I have a main component named Stepper that includes a child component called ShortSummary. I am attempting to pass a property from Stepper to ShortSummary by clicking on a radiobutton, but it is not working! Here's my setup. This is the code for Stepp ...

javascripthtmlcssvue.jsvuetify.js

Creative CSS Techniques: Styling Initial Capital Letters (Drop Caps) in a CSS3 Multicolumn Layout

For the past year, the multicolumn css3 property has grown in popularity among different browsers. It's a good reason to consider implementing it on your website for improved design and readability. I decided to take it a step further and incorporate ...

csslayoutmultiple-columns

The linear transition property in CSS is not being followed as expected

I'm trying to create a smooth linear transition on the height of a box with CSS, but it's not working as expected. Currently, the transition is abrupt - the height suddenly increases and then the margins take up all the time. Can someone provide ...

htmlcsscss-transitions

Is it possible for the `drop-shadow` shadow to be applied only to certain elements?

In the top image below, you can see how the drop-shadow effect would be drawn if applied to the top element. I am exploring the possibility of having the shadow cast only on specific objects, as shown in the bottom image. I am open to unconventional solut ...

cssdropshadowcss-filters

Attempting to position a centrally aligned div block containing images towards the left side

I'm having an issue with aligning multiple images on my webpage. I want them to be left justified when the page is resized, while still keeping the div block centered. Currently, they are all being centered: See below: Here is the HTML and CSS code ...

htmlcss

PHP selectively incorporates a section of a document

Hey there, I've been encountering a strange issue on my website. I have a foot.php file that I include at the end of some pages so that any changes made to it will affect all pages on the site. While this works perfectly on most pages, there are certa ...

phphtmlinclude