0

As you hover the text or icon only one of them changing i want them to change color when hovering inside button, this was caused by div i put inside the button to store text is there anyway to use the button as the trigger for all of the div inside to change color at the same time using .button-wrapper as the :hover trigger

/* Nav-Bar */
.nav-bar-wrapper {
    display: flex;
    z-index: 0;
    position: absolute;
    padding: 5px;
}

.button-wrapper {
    margin: 5px;
}

.button-wrapper > button{
    display: flex;
    margin: 0px;
    padding: 0px;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    border: none;
    outline: none;
}

.button-wrapper > button > .icon-wrapper , .button-text{
    color: orange;
    padding: 5px;
}

.button-wrapper > button:hover , .icon-wrapper:hover>i , .button-text:hover {
    color: white;
    background-color: black;
    transition: ease-in-out 0.5s;
}

.button-wrapper:hover , button:hover , .icon-wrapper:hover , .button-text:hover {
    color: whitesmoke;
    background-color: black;
    transition: ease-in-out 0.5s;
}

.button-wrapper > button > .button-text{
    height: 100%;
    font-weight: bold;

}
<!DOCTYPE html>
<meta charset="utf-8">
<html>
    <head>
        <title>Lopzx TABS</title>
        <link rel="stylesheet" href="stylesheets.css">
        <link rel="icon" href="img/icon/guitar.png">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <script href="main-javascript.js" type="text/javascript" language="javascript"></script>
    </head>

    <body>
        <!--Navbar-->
        <div class="nav-bar-wrapper">
            <div class="button-wrapper">
                <button>
                    <div class="icon-wrapper"><i class="material-icons">home</i></div>
                    <div class="button-text">HOME</div>                   
                </button>
            </div>

            <div class="button-wrapper">
                <button>
                    <div class="icon-wrapper"><i class="material-icons">description</i></div>
                    <div class="button-text">TAB</div>                   
                </button>
            </div>
        </div>

        <div class="nav-bar-background-wrapper"></div>

        <!--Body-->
    </body>
    









</html>

0 Answers0