conceal a component within a different container

Is there a way to hide or show an element within a container based on the hover state of another container?

Here is an example of what I have tried so far:

HTML5

<div class="left-menu-container">
    <div class="left-menu-inner-container">
        <div class="left-menu-item-container">
            <a href="AppsDashboard" class="left-menu-link">
                <div class="left-menu-item-first">
                    Find an Application
                </div>
            </a>
            <div class="sub-menu">
                <input type="text" value="Enter app name here" onclick="Clear(this, 'Enter app name here');" onblur="Reset(this, 'Enter app name here');" />
            </div>
        </div>
    </div>
</div>

CSS3

div.left-menu-container {
    float: left;
    width: 19%;
    padding-right: 1%;
}

div.left-menu-inner-container {
    width: 100%;
}
div.left-menu-item-container
{
    width:100%;
}

div.left-menu-item-first {
    width: 93%;
    border: 1px solid #999;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
    transition: 0.15s ease-in-out;
    color: black;
    min-height: 26px;
    padding-left: 1%;
}

    div.left-menu-item-first:hover {
        width: 97%;
        border: 1px solid #999;
        color: white;
        background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
        padding-left: 3%;
    }

div.left-menu-item-container .sub-menu {
    width: 97%;
    border: 1px solid #999;
    color: white;
    background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
    padding-left: 3%;
    display: none;

}

div.left-menu-item-first:hover left-menu-item-container.sub-menu {
    position:absolute;
    width: 80%;
    border: 1px solid #999;
    color: white;
    background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
    float:left;
    display: block;
    z-index: 1000;
    float: left;
}

Unfortunately, this method does not seem to work as intended. Hovering over the left-menu-item-first div does not reveal the submenu within the left-menu-item-container parent. Is it necessary for them to be direct children for this Pure CSS approach to function properly? While I have already implemented a jQuery solution, I am interested in achieving this effect using solely CSS if possible.

htmlcss

Answer №1

When hovering, you have the ability to modify child and sibling elements but not an entirely different element.

If you position the submenu directly after the initial menu item, you can utilize the sibling selector + like this:

div.left-menu-container {
    float: left;
    width: 19%;
    padding-right: 1%;
}

div.left-menu-inner-container {
    width: 100%;
}
div.left-menu-item-container
{
    width:100%;
}

div.left-menu-item-first {
    width: 93%;
    border: 1px solid #999;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
    transition: 0.15s ease-in-out;
    color: black;
    min-height: 26px;
    padding-left: 1%;
}

    div.left-menu-item-first:hover {
        width: 97%;
        border: 1px solid #999;
        color: white;
        background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
        padding-left: 3%;
    }

div.left-menu-item-container .sub-menu {
    width: 97%;
    border: 1px solid #999;
    color: white;
    background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
    padding-left: 3%;
    display: none;

}

.left-menu-link:hover + .sub-menu {
    position:absolute;
    width: 80%;
    border: 1px solid #999;
    color: white;
    background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
    float:left;
    display: block;
    z-index: 1000;
    float: left;
}
<div class="left-menu-container">
    <div class="left-menu-inner-container">
        <div class="left-menu-item-container">
          <span class="AppsDashboard">
            <a href="AppsDashboard1" class="left-menu-link">
                <div class="left-menu-item-first">
                    Find an Application
                </div>
            </a>
            <div class="sub-menu">
                <input type="text" value="Enter app name here" onclick="Clear(this, 'Enter app name here');" onblur="Reset(this, 'Enter app name here');" />
            </div>
            </span>
        </div>
    </div>
</div>

Answer №2

To work around the lack of a CSS parent selector, consider adjusting your HTML so that the hovered item is a sibling of left-menu-item-container.sub-menu. You can achieve this by utilizing a CSS sibling selector:

Update the following code snippet:

div.left-menu-item-first:hover left-menu-item-container.sub-menu

to

div.left-menu-item-first:hover + left-menu-item-container.sub-menu

Alternatively,

Change:

div.left-menu-item-first:hover left-menu-item-container.sub-menu

to

.left-menu-link:hover + left-menu-item-container.sub-menu

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

Working with both Javascript and jQuery code within a single HTML file

I recently created a website and on one of the pages, I added some jQuery elements like a start button and progress bar. However, when I tried to implement a JavaScript timer on the same page by adding the script into the header, the jQuery elements stoppe ...

javascriptjqueryhtml

What is the process for turning off bootstrap form validation?

I am facing an issue with utilizing the default input email validation in my development project. It seems that Bootstrap, which is being used for the website, has its own validation mechanism. Whenever I begin typing in a Bootstrap input field, an error m ...

htmlcssformstwitter-bootstrapvalidation

Is there a CSS alternative to using <br clear=all> on divs that do not have set heights?

Back in the day, I used to rely on <br clear=all> at the end of a div, without specifying a height value in CSS, just to control its height. These divs would expand and contract based on the content within. Is there a more elegant approach to make ...

htmlcss

Issues arise when implementing ReactJS transitions for progress bars

As a newcomer to the world of ReactJS, I have been exploring the FB documentations and online tutorials to kickstart my test project. Within this project, I wanted to implement a progress bar that visually represents the user's progression through fi ...

cssreactjs

When using Websocket, an error message stating "Invalid frame header" will be triggered if a close message of 130 or more characters is sent

I am utilizing the ws node.js module along with html5's WebSocket. The Websocket connection is established when a user triggers an import action, and it terminates once the import is completed successfully or encounters an error. At times, the error ...

javascriptnode.jshtmlwebsocket

C++ displaying results through web interfaces

Is it possible to write a C++ program that displays "Hello World!" on a webpage? #include <iostream> using namespace std; int main () { cout << "Hello World!"; return 0; } And is it possible to integrate this program into an HTML webpage ...

c++includehtmlexe

Hover over CSS sprite

My anchor tag looks like this: <a href="#"> <i class="ico01"></i> <span>Text</span> </a> The ico01 class applies an image using CSS sprite. I want to change the background color of the entire content inside the a ...

htmlcsscss-sprites

Browser does not support the Media Query

I'm completely puzzled by Media Queries. I've been attempting to resolve this issue but cannot seem to identify where the problem lies. While creating a website with Wordpress, my header.php contains the following line: <meta name="viewpo ...

cssmedia-queriesviewport

The arrangement of pictures on a card

I decided to tweak the original concept by placing the images inside a Bootstrap card. However, the end result is that the images appear to be floating. https://i.stack.imgur.com/Uf721.png Any suggestions on how to make them fit nicely within the card? ...

htmlcssbootstrap-5

Display or conceal a field based on the content of another field using jQuery

Is there a way to hide or show a field on my website based on the value in the shopping cart? I've created a function for this, but I'm struggling with the condition. Can you help me figure out how to write it correctly? <script> $(docume ...

htmljquerycss

selenium.common.exceptions.ElementNotInteractableException: Error: the element cannot be interacted with

My current programming project involves using selenium webdriver with Twitter for fun, but I've run into a frustrating issue. The problem arises when I attempt to input text into the tweet box: https://i.stack.imgur.com/Zxwvg.png To activate the ele ...

htmlpython-3.xselenium-webdriverpython-3.6

What's the best way to iterate through multiple objects within <td> tags using Vue.js?

I have an Array filled with multiple Objects, and now I am interested in iterating through each object as a <tr> within a <table>. I have successfully achieved this. However, some of these objects might contain nested objects. In such cases, I ...

javascripthtmlvue.js

Having trouble accurately obtaining the height of a DIV element using jQuery

After trying to troubleshoot on my own, I ran into a roadblock due to my specific requirements not being met by existing solutions. The issue at hand is as follows: I have a sticky DIV element positioned to the left, nested within another DIV Element wit ...

javascriptjqueryhtmlcss

Class-driven dynamic CSS

Recently, I came across a JSP code snippet that looks like this: <table id="mytable" cellspacing="0"> <tr data-depth="0" class="collapse level0"> <td></td> <td></td> <td></td> </tr> ////... /...// < ...

htmlcssjsp

Osclass Website Alert: Multiple H1 tag Issue Detected

I operate a website called MyMobPrice and utilize OsClass for its functionality. However, I am encountering an error on each product page stating "More than One H1 Tag found." The issue lies within the two sets of H1 codes designed for desktop and mobile ...

phphtmlosclass

The transition property in CSS and JavaScript does not seem to be functioning properly in Firefox

Recently, I integrated a Slide in menu script on my website using a Slide in menu script. After following all the instructions provided, the menu started working flawlessly on Chrome and Safari browsers. However, my main goal was to make it function on Fir ...

javascripthtmlcss

Another class is overriding the border of the text-box

I'm facing a challenge in customizing the material ui css. Specifically, I want to set the border color of a textbox to red. The issue arises when the bottom border gets overwritten. Upon investigation, I discovered that the culprit is the class MuiIn ...

javascripthtmlcssreactjsmaterial-ui

Variations in CSS Stylesheets for Various Parts of the Body

Currently, I am in the process of creating a single page website. One issue that I have encountered is needing a Bootstrap "modal" class popup to appear when a button is clicked. However, the template I am utilizing was designed using Bootstrap Version 1, ...

csstwitter-bootstrapmodal-dialogtwitter-bootstrap-3stylesheet

Tips for Improving the Naming Conventions of CSS Modules

I currently have the following setup in my webpack.config.js: { test: /\.css$/, use: [ {loader: "style-loader"}, { loader: "css-loader", options: { modules: true, importLoaders: 1, s ...

csswebpackcss-modules

What method would you recommend for modifying HTML text that has already been loaded using JSP?

Is there a way to update text on an HTML document without reloading the entire page? I'm looking to create a simple "cart" functionality with 5 links on a page. When a link is clicked, I want it to increment the "items in cart" counter displayed on th ...

javascriptjavahtmljsp