Is there a way to use pure CSS to adjust the widths of classes on hover?
Although the transition is successfully changing the classes, class .b and .c are not impacting the width of classes that come before them. Ideally, I would like the previous class (e.g. class .a) to shrink when hovering over class .b
Below is the code I have posted, and I am hoping someone can provide a solution that is strictly CSS based.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.column {
float: left;
width: 33.33%;
height:100%;
}
.a{
background-color: #ff0000;
transition: 0.3s;
}
.a:hover{
background-color: #c41333;
width:40%;
}
.a:hover ~ .b, .c{
width:30%;
}
.b{
background-color: #eeeeee;
transition: 0.3s;
}
.b:hover{
background-color: #c41333;
width:40%;
}
.b:hover ~ .a, .c{
width:30%;
}
.c{
background-color: #cccccc;
transition: 0.3s;
}
.c:hover{
background-color: #c41333;
width:40%;
}
.c:hover ~ .a, .b{
width:30%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}<!--<head>
<link rel="stylesheet" href="style.css" />
</head>-->
<div class="row">
<div class="column a">
<p>tester</p>
</div>
<div class="column b">
<p>tester</p>
</div>
<div class="column c">
<p>tester</p>
</div>
</div>
Appreciate any assistance provided.