Gabotronix
1 month ago
105
1
General

Applying css properties to multiple children on hover

Posted 1 month ago by Gabotronix

Hi everybody, I want to apply different properties to a element on hover, all elements are children of the class I apply hover but it's not working for some reason...

My button element:

<button class="LAYOUTbutton_container fs_huge c_light" type="button">
            ASESORIA
            <div class="LAYOUTbutton_line_top"></div>
            <div class="LAYOUTbutton_line_bottom"></div>
            <div class="LAYOUTbutton_line_left"></div>
            <div class="LAYOUTbutton_line_right"></div>
        </button>

My classes

.LAYOUTbutton_container{font-family:'Oswald'; margin:0px 20px; background-color:rgba(0,0,0,0.3); padding:20px; position:relative; text-transform:uppercase; display:flex; align-items:center; justify-content:center;}
.LAYOUTbutton_line_top{width:0px; height:4px; position:absolute; top:0px; left:0px; transition:all 1s ease; background-color:white;}
.LAYOUTbutton_line_bottom{width:0px; height:4px; position:absolute; bottom:0px; left:0px; transition:all 1s ease; background-color:white;}
.LAYOUTbutton_line_left{width:4px; height:0px; position:absolute; top:0px; left:0px; transition:all 1s ease; background-color:white;}
.LAYOUTbutton_line_right{width:4px; height:0px; position:absolute; top:0px; right:0px; transition:all 1s ease; background-color:white;}
.LAYOUTbutton_container:hover .LAYOUTbutton_line_top .LAYOUTbutton_line_bottom{width:100% !important;}
.LAYOUTbutton_container:hover .LAYOUTbutton_line_left .LAYOUTbutton_line_right{height:100% !important;}

Please sign in or create an account to participate in this conversation.