Botones hover (CSS)
Efecto Hover en los elementos no seleccionados
<style>
section {
display: flex;
position: absolute;
transform: translate3d(-50%, -50%, 0);
left: 50%;
top: 50%;
}
div {
padding: 20px;
margin: 5px;
background: orange;
border-radius: 7px;
transition: .3s;
}
section:hover > :not(:hover) {
opacity: .4;
background: blue;
color: white;
}
</style>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>