Choose the element before and add a style effect with CSS

Question

Choose the element before and add a style effect with CSS

I'm trying to create a layout with 3 <div> elements in one horizontal line, each with a width of 33.33%. When hovering over one div, I want its width to expand to 50% while the other two shrink to 25%.

<div id="A"></div>
<div id="B"></div>
<div id="C"></div>

I have successfully applied this effect to div A:

#A:hover{width:50%}
#A:hover+#B
{width:25%}
#A:hover~#C
{width:25%}

It works as expected for A. However, when hovering over B:

#B:hover{width:50%}
#B:hover+#A
{width:25%}
#B:hover~#C
{width:25%}

B expands to 50% and C shrinks to 25%, but A remains at 33.33%. How can I resolve this issue?

javascript jquery html css

Answer 1

Answer №1

When it comes to Css, there are no previous selectors.

By default, the width is set to 33.33%.
Upon hovering over the parent element, the width changes to 25%.
Hovering over the div inside further adjusts the width to 50%.

* {
  box-sizing: border-box;
}
.par {
  overflow: hidden; /* to clear floats */
}
.par div {
  width: 33.33%; /* default width */
  transition: .2s linear;
  border: 1px solid red;
  height: 100px;
  float: left;
}
.par:hover div {
  width: 25%; /* width when you hover on parent */
}
.par div:hover {
  width: 50% /* width when you hover on the element */
}

<div class="par">
  <div id="A">1</div>
  <div id="B">2</div>
  <div id="C">3</div>
</div>

Answer 2

When it comes to Css, there are no previous selectors.

By default, the width is set to 33.33%.
Upon hovering over the parent element, the width changes to 25%.
Hovering over the div inside further adjusts the width to 50%.

* {
  box-sizing: border-box;
}
.par {
  overflow: hidden; /* to clear floats */
}
.par div {
  width: 33.33%; /* default width */
  transition: .2s linear;
  border: 1px solid red;
  height: 100px;
  float: left;
}
.par:hover div {
  width: 25%; /* width when you hover on parent */
}
.par div:hover {
  width: 50% /* width when you hover on the element */
}

<div class="par">
  <div id="A">1</div>
  <div id="B">2</div>
  <div id="C">3</div>
</div>

Answer 3

Answer №2

Utilizing Flexbox can achieve this layout without the need for a parent selector:

* {
  box-sizing: border-box;
}
.container {
  width: 80%;
  margin: 1em auto;
  display: flex;
}
.item {
  height: 150px;
  border: 1px solid grey;
  flex: 1;
  transition: flex 1s ease;
}
.item:hover {
  flex: 0 0 50%;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 4

Utilizing Flexbox can achieve this layout without the need for a parent selector:

* {
  box-sizing: border-box;
}
.container {
  width: 80%;
  margin: 1em auto;
  display: flex;
}
.item {
  height: 150px;
  border: 1px solid grey;
  flex: 1;
  transition: flex 1s ease;
}
.item:hover {
  flex: 0 0 50%;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Choose the element before and add a style effect with CSS

Answer №1

Answer №2

Similar questions

Updating .babelrc to include the paths of JavaScript files for transpilation

Removing elements from an array of objects using specific values stored in another array - JavaScript

Accessing Facebook through Login with only a button visible

Run a PHP function using <button onclick=""> tag

Is there a way to insert text onto an Isotope image?

JS unable to insert new row in table

The use of "app.use("*") appears to be triggering the function repeatedly

What is the best way to determine which CSS class is shown when the page is loaded using JQuery?

Is it possible to serve CSS using relative paths that go beyond the URL root?

Monitoring changes within a factory

Error Timeout Encountered by Langchain UnstructuredDirectoryLoader

What is the best way to incorporate the .top offset into a div's height calculation?

Manipulating object properties within an array through iteration

Having issues transferring the variable from JavaScript to PHP?

When a user clicks on a React listItem, the information for that specific item is displayed using

Learn how to use Javascript and ASP.NET to refresh the parent page in Mozilla Firefox browser

What could be causing my div to display a horizontal scrollbar in Firefox?

Wait for the canvas to fully load before locating the base64 data in HTML5

Create custom buttons in Material-UI to replace default buttons in a React modal window

"JQuery encounters a parsing error while trying to process an XML