The CSS selector for adjacent siblings seems to be malfunctioning

This code is designed to show the "container-1" division every time I hover over the "container" division. However, it's not behaving as expected because instead of displaying block on hover, it simply remains hidden.

CSS Code

.container:hover + .container-1 {
  display: block;
  color:blue
}

.container-1{
 display: none;
 margin-bottom: 15px;
 padding: 12px 0;
 border-radius: 3px;
 background-color: rgb(70, 70, 70);
}

HTML Code

<div class="container-1">
        <p><b>$167</b> still needed for this project</p>
    </div>
<div class="container">
        <div class="w3-light-grey" id="bar">
            <div class="w3-orange" style="height: 18px;width:75%"></div>
        </div> 
        <div class="box-1">
            <p>
                <span>
                    <b style="color:orange;">Only 3 days left</b> to fund this project
                </span><br>
                <span>
                    Join the <b>42</b> other donors who have already supported this project. Every dollar helps.
                </span>
            </p>
            <div>
                <input type="text" class="field">
                <input type="button" class="btn" value="Give Now"><br>
                <span><b style="color:rgb(110, 200, 235);">Why give $50?</b></span>
            </div>
        </div>
</div>
htmlcss

Answer №1

The sibling selector that comes right after another specific element is called the adjacent sibling selector (+).

In order for elements to be considered siblings, they must share the same parent element. "Adjacent" in this context means immediately following, not preceding.

To make .container-1 the adjacent sibling of .container, simply place it at the bottom of .container.

Use this CSS Code:

.container:hover + .container-1 {
  display: block;
  color: blue;
}

.container-1 {
  display: none;
  margin-bottom: 15px;
  padding: 12px 0;
  border-radius: 3px;
  background-color: rgb(70, 70, 70);
}
<div class="container">
  <div class="w3-light-grey" id="bar">
    <div class="w3-orange" style="height: 18px;width:75%"></div>
  </div>
  <div class="box-1">
    <p>
      <span><b style="color:orange;">Only 3 days left</b> to fund this project</span>
        <br>
      <span>Join the <b>42</b> other donors who have already supported this project. Every dollar helps.</span>
    </p>
    <div>
      <input type="text" class="field">
      <input type="button" class="btn" value="Give Now"><br>
      <span><b style="color:rgb(110, 200, 235);">Why give $50?</b></span>
    </div>
  </div>
</div>
<div class="container-1">
  <p><b>$167</b> still needed for this project</p>
</div>

Answer №2

The issue arises when .container-1 is placed before .container in the HTML structure. To resolve this, you can switch the positions of these elements and apply display: flex along with flex-direction: column-reverse to the parent element (in this case, <body>):

.container:hover+.container-1 {
  display: block;
  color: blue;
}

.container-1 {
  display: none;
  margin-bottom: 15px;
  padding: 12px 0;
  border-radius: 3px;
  background-color: rgb(70, 70, 70);
}

body {
  display: flex;
  flex-direction: column-reverse;
}
<div class="container">
  <div class="w3-light-grey" id="bar">
    <div class="w3-orange" style="height: 18px;width:75%"></div>
  </div>
  <div class="box-1">
    <p>
      <span><b style="color:orange;">Only 3 days left</b> to fund this project</span><br>
      <span>Join the <b>42</b> other donors who have already supported this project. Ever dollar helps</span>
    </p>
    <div>
      <input type="text" class="field">
      <input type="button" class="btn" value="Give Now"><br>
      <span><b style="color:rgb(110, 200, 235);">Why give $50?</b></span>
    </div>
  </div>
</div>

<div class="container-1">
  <p><b>$167</b> still needed for this project</p>
</div>

Keep in mind that introducing a new element may cause the .container element to shift on the page, potentially moving it away from the user's hover position. This could lead to some unwanted visual 'flashing' effects.

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 webpage on IE 9 is not aligning in the center

Everything seems to be working well in Chrome and IE 9 compatibility mode, but not in the actual IE 9 mode. The goal is to have the page centered. Check out the site here Any ideas on what could be causing this issue? ...

htmlcssinternet-explorer-9

What are some ways to personalize a scrollbar?

I am looking to customize the scrollbar within a div. I attempted to modify it using the code below, but I encountered difficulties when trying to change the scroll buttons and did not achieve my desired outcome. Additionally, this customization did not wo ...

javascripthtmlcss

Enhancing the appearance of multiple images with CSS and Bootstrap styling

I am struggling to arrange multiple images in my booking system as they are all displaying in a single column rather than the desired layout https://i.sstatic.net/1E8jO.png What I had hoped for was a layout like this https://i.sstatic.net/v8K34.jpg Curre ...

csslaravel-8

Navigate to web pages through hyperlinks in a Textview using a WebView on an

Here is the text that needs to be displayed in a text view. I want the hyperlink to open a webview when clicked, while the rest of the text should not be clickable. String value = "Check out this link: <a href="http://www.google.com">Go to Google< ...

javaandroidhtmlhyperlinktextview

Columns nested within tabs in Bootstrap4

My current layout is shown here: https://i.sstatic.net/vQsqz.jpg I am looking to incorporate nested columns within these tabs. My attempted solution so far has been unsuccessful. The issue I am facing is that the columns within the specific tabs are ove ...

htmlcsstwitter-bootstrapbootstrap-4

Minimize the number of HTTP requests by including CSS and JS files in PHP

I've been considering a method to reduce the number of HTTP requests made when loading a page by minimizing the amount of downloaded files, while still keeping separate files on the server. The thought process is as follows: <!DOCTYPE html> &l ...

phpjavascriptcssperformanceimport

What is the best way to transfer information from JavaScript to a JSON database using the fetch API?

Within the userDB.json file, it appears as follows; [{ "username": "john", "xp": 5 }, { "username": "jane", "xp": 0 } ] Inside the app.js file ; async function getUsers() { le ...

javascripthtml

IE - Adjusting the Width of the Vertical Spry Menu Bar

As I delve into the world of web design using Dreamweaver, I find myself faced with some challenges as a beginner. One specific issue I'm encountering is related to a vertical Spry Menu Bar on my website that functions well in most browsers except for ...

cssinternet-explorerdreamweaverspry

Issue with CSS wrapper background not displaying

I am currently working with a layout that looks like this: <div class="contentWrapper"> <div class="left_side"></div> <div class="right_side"></div> </div> The contentWrapper class is styled as follows: .contentWrappe ...

cssbackgroundcss-float

I have found that the CSS property command for multiple columns functions properly in Opera and IE, but unfortunately does not work in Firefox, Chrome, or Safari

When viewing the html code below, it appears as two columns in Opera and IE10, but only one column in Chrome, Safari, and Firefox. Can anyone explain why this is happening? The styling code [ body{column-count: 2} ] seems to only be effective in Opera and ...

htmlcss

Tips for aligning a radio button and label on the same line without breaking the layout in HTML and CSS

I'm encountering a problem with positioning an HTML radio button alongside its label. When the label text is too lengthy, it ends up wrapping below the radio button instead of staying on the same line. Here is the html: <div class="form-check ...

htmlcssfrontendbootstrap-5

Tips on ensuring a <video> element occupies the full height and width of the screen

I am currently working on an Angular 6 project where I am live streaming a user's webcam to an HTML element. My goal is to simulate the experience of capturing a video or photo on a mobile device. However, the size of the video is currently small. I ...

htmlcssangularvideogetusermedia

Attaching a $UI element to a <div> tag with JQuery may result in unexpected errors and issues

Attempting to connect SagePayments card elements to the paymentDiv. Followed their sample project for guidance, but encountering issues with populating the elements when running the program with a custom Sandbox merchantID and merchantKey. Chrome's de ...

javascriptc#jqueryhtmlopayo

Encountering a problem creating a hover overlay effect on a transparent PNG image within a parent div that has a background color

I'm struggling with creating an overlay hover effect on an image that has transparency. The issue I'm facing is that the black background of the parent div element is filling in the transparent parts of the PNG image, making it look like those ar ...

htmlcsspngoverlaytransparency

Toggle visibility with JQuery's onClick event

I am looking for a way to toggle the visibility of text that has display: none; in CSS when a button is clicked, as well as clear the input field on the onClick event. Currently, the text remains visible even after it has been displayed. Any assistance wou ...

jquerycss

Spacing before input text is found to be unnecessary and can be removed

Hello there, I've encountered a slight issue with a text input field that has border radius. The first character typed seems to protrude slightly outside the input field due to the border radius. Is there a way to add some extra whitespace before the ...

htmlcss

Ways to align a nested list vertically

There are two nested lists: <ul> <li>First item <ul> <li> <a href="#">some item</a> </li> <li> <a href="#">some item</a> <</li& ...

css

Personalize the appearance of dynamically generated DIV elements

This script generates a random number of squares (ranging from 20 to 40) and adds text to each square. The script then calculates the width of each square so that they all fit in a single row. Here is the code snippet: var quantity = Math.floor(Math.ran ...

javascriptcss

Can you make two columns in CSS that are left floated and maintain their original order?

While the title may not provide much clarity, I am struggling to put into words exactly what I am trying to achieve. I have created a layout in Photoshop which I have shared below to help illustrate my goal. Essentially, I have a blog that displays my sto ...

javascripthtmlcss

Retrieving the final item from an ng-repeat loop that has been sorted using the orderBy function

I need assistance in creating a list of terms and their definitions, each categorized under a header based on the first letter of the term. A Apple B Banana Currently, I am using the following code: <div ng-repeat="definition in definitions"& ...

javascripthtmlangularjsangularjs-ng-repeatangularjs-orderby