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

Having issues with CSS vertical margin not functioning properly

Exploring a GitHub image repository with HTML loops

Error encountered: Unable to access the 'Lastname' property as it is undefined

The color of the text on the Homepage appears differently on iOS Safari

Profile picture placeholder with conditional logic

Semantic UI Footer allows you to easily create a stylish

Exploring Webpack: Unveiling the Contrasts Between Production and Development CSS Bundles

What are some methods for toggling text visibility in PHP?

Is there a way to make a sass file universally accessible without having to import it into every file and causing an increase in bundle size?

Doesn't IE support the use of jQuery.last()?

Restoring the background color to its original shade following alterations made by jQuery

Can Webpack be used to produce only CSS files without generating the output.js file?

Creating visually stunning full-width sections with graphic backgrounds using Bootstrap

Creating if-else conditions in React can be achieved by utilizing the ternary

Unable to store cookie using jQuery on Internet Explorer 9

Issue with Bootstrap modal not closing

Wordpress team exhibition

Adjusting firebugx.js for compatibility with Internet Explorer Developer Tools

Tips for preventing child elements from becoming distorted when the parent element is resized

Customizing Bootstrap SCSS variables by substituting them with different Bootstrap variables