Choose the div element that is immediately before the current div

Attempting to create a harmonica effect by adjusting the height of divs upon hovering over another.

The HTML is structured as follows:

<html><body>
  <div class="section1"></div>
  <div class="section2"></div>
  <div class="section3"></div>
  <div class="section4"></div>
</body></html>

Each section has a height set at 25%. When hovering over section1, all other divs should decrease in size while section1 expands. Achieved through the following CSS:

.section1 {
  height: 40%;
}
.section1:hover ~ div:not(section1) {
  height: 20%;
}

An issue arises with the ~ selector only affecting sibling divs below the current one. When applying the same code for section2, sections 3 and 4 are altered but section1 remains unchanged due to its position above.

Is it feasible to overcome this obstacle using only CSS?

cssselecthtmlsiblings

Answer №1

Indeed, wrapping your sections and adjusting their height on hover can create a neat effect. You can increase the height of the hovered section while reducing the others.

See a live demo here

Here's how you can structure your HTML:

<div class='section-wrapper'>
    <div class="section1"></div>
    <div class="section2"></div>
    <div class="section3"></div>
    <div class="section4"></div>
</div>

Make sure to apply the following CSS styles for the desired effect:

.section-wrapper {
    height: 500px;
}
.section-wrapper div {
    height: 25%;
    outline: dotted 1px;
}
.section-wrapper:hover div {
    height: 20%;
}
.section-wrapper div:hover {
    height: 40%;
}

Answer №2

Check out this link

HTML

<html>
    <body>
        <div class="container">
            <div class="section1">1</div>
            <div class="section2">2</div>
            <div class="section3">3</div>
            <div class="section4">4</div>
        </div>
    </body>
</html>

CSS ​

.container:hover div {
    height:20px;
}
.container .section1,.container .section1:hover,
.container .section2,.container .section2:hover,
.container .section3,.container .section3:hover,
.container .section4,.container .section4:hover{
  height: 50px;
}

​

Answer №3

Just place all the sections inside a parent container

<div class="container">
  <div class="section1">Section 1</div>
  <div class="section2">Section 2</div>
  <div class="section3">Section 3</div>
  <div class="section4">Section 4</div>
</div

Then apply some styling to them like this:

.container div{height: 25%; border:solid 1px #f00}
.container:hover div{height: 20%;}
.container div:hover {height: 40%;}

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

Inquiry about CSS Media Queries

I am facing an issue with CSS media queries... For my HTML page, I have separate files for desktop and iPad styles - desktop.css and ipad.css. In desktop.css, I have used @import url("ipad.css"); and added a @media not only screen and (device-width:768px) ...

javascripthtmlcssw3cmedia-queries

Is there a single CSS property value that you want to exclude?

Is there a way to disable only one specific value of a CSS property? For example, when it comes to the 'text-decoration' property, options include none, underline, overline, line-through, blink, and inherit. I want to allow all values of text-de ...

htmlcsstext-decorations

Executing a click event on an HTML table dynamically created from an AJAX request

I have a script that creates an html table displaying Users of the application, with options to either EDIT or DEACTIVATE each user. These actions are handled using AJAX. The table structure is as follows: <tr><td><a id='edit_link&apo ...

jqueryhtmlajax

Dynamically remove the underline tag from a table cell

Within my HTML, I've inserted the code below for a cell: cell.innerHTML = "<u>View All</u>"; In my onclick event for the cell, I have this code (for example, it's based on a condition where I structure the content as shown below, no ...

jqueryhtml

Looking for help organizing a navigation bar?

I recently embarked on the journey of creating my own website and I am in need of assistance from individuals who possess expertise in CSS and HTML. The specific challenge I'm currently facing involves aligning the navbar elements properly. I aim to p ...

htmlcssbootstrap-5

The dropdown feature is failing to display complete words in the submitted output when there is a

Attempting to craft my inaugural PHP function – a dropdown menu – has been mostly successful, however, upon submitting/posting the data, only the initial word of options containing spaces appears in the output. For instance, if I include 'First N ...

phpformsfunctionselectpost

Navigate through JSON data to add to an HTML table

HTML <table id="id_kbdata" cellspacing="0" cellpadding="0" > </table> JSON [ { "id":"3", "title":"Doing Business In...", "businessSubjectAreas":[ { "businessSubjectArea":"Market and Sell Products/Service" }, ...

jqueryhtmljson

Does CSS positioning change depending on the screen size?

I need help fixing the positioning of my logo on the screen. I want it to be 40px from the top and centered horizontally regardless of the screen size. Here is the code that I have: <html> <head> <style type="text/css> body{ back ...

htmlcsspositioning

How can I modify the HTML code for rooms in the HTML 5 client of the bigbluebutton application?

Is it possible to customize the HTML code of rooms within the BigBlueButton source code? Additionally, how can I modify the CSS styles of elements in room sessions? For instance, I am interested in hiding the logo of BigBlueButton by setting 'display: ...

htmlcssbigbluebutton

What are the steps to retrieve JSON data and display it using an unordered list in an HTML document?

My JSON data structure looks like this: { "fID": "00202020243123", "name": "John Doe", "List": ["Father", "Brother", "Cousin"] } When I render this JSON element in my model and view it in the HTML, everything works fine. However, when I try t ...

javascriptjqueryhtmljsonhtml-lists

"An easy way to dynamically update a select dropdown based on the data of the corresponding row in a table using jQuery

Having some trouble with dynamically populating form input fields in a table. The first row works fine, but when I change the select option in the second row, it affects the previous field instead of the current row: How can I ensure that changing the sel ...

javascriptjqueryhtmlformshtml-table

Placeholder disappears when text color is changed

I have been struggling for 3 hours trying to change the placeholder color to graytext, but it's just not working. Here is the code I've been using: <div class="form-group"> <label for="email">Email:</label ...

htmlcssbootstrap-4

Positioning a Three.js static CSS2DObject with respect to the camera's perspective

I am currently working on a unique program visualizer that utilizes Three.js to showcase various aspects of a program to the user. One crucial feature of this visualizer is allowing users to click on specific objects to view additional information about th ...

javascripthtmlthree.js

Div sliding out of view

I'm encountering a slight issue with this template: essentially, my goal is to implement a feature where clicking on a box will expand it while simultaneously sliding the other boxes off-screen. However, instead of just sliding the div off-screen, it ...

javascriptjqueryhtmlcss

What is the best way to reset the values in react-multiple-datepicker?

Having trouble clearing values assigned in react-multiple-datepicker library. import MultipleDatePicker from "react-multiple-datepicker"; import React from "react"; class Addjob extends React.Component { constructor(props) { super ...

javascriptnode.jshtmlreactjscss

What is the best way to make an HTML element's width automatically adjust based on the margin size?

I'm currently working on creating a rectangular button using HTML and CSS. The challenge I'm facing is ensuring that the width of the button remains consistent regardless of the amount of text it contains. Whether it's just a few words or mu ...

htmlcss

Spin the content of a div after a button click with the power of jquery and css

Looking to add interactivity to rotate text within a div upon button click using jQuery and CSS. If the user selects Rotate Left, the text will rotate to the left. Alternatively, if the user chooses Rotate Right, the text will rotate to the right. Here&a ...

javascriptjqueryhtmlcss

A two-column bootstrap design with zero padding or gaps

This is the layout I am aiming for: Below is the code I currently have: <div class="row "> <div class="col-lg-6 row-eq-height push-right"> <img src="1.jpg" class="img-responsive"> </div> <d ...

htmlcsstwitter-bootstrap

werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The server is unable to process the request sent by the browser or proxy. This error occurred in a Flask web application

Can someone guide me on troubleshooting this issue in Flask? I am still learning. Server running at (Press CTRL+C to exit) 127.0.0.1 - - [26/Jul/2020 11:19:45] "GET /predict HTTP/1.1" 500 - Traceback (most recent call last): raise exceptions. ...

pythonhtmlcssflaskpython-requests

PHP is having trouble identifying the file extension for file uploads

After sending an array through AJAX and echoing it in PHP, I have the following data: [file] => Array ( [name] => XXXX.jpg [type] => image/jpeg [tmp_name] => D:\xampp\tmp\phpC5F2.tmp [error] => 0 [size] = ...

phphtmlajaxpdf