CSS Hover a div and other div also hover

Question

Please help me, I want to hover "back to homepage" that active the transform from the .dotcontain. First I try .backtohompage a:hover + .dotcontain but it not work. Also I try that .backtohomepage a:hover > .dotcontain but when I hover to the link "back to homepage" but the .dotcontain not active and transform it. Thanks

CSS code

.loginheadercontain{
    width: 100%;
    display: flex;
    padding-top: 20px;
    height: 40px;
}

.dotcontain{
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    margin: 0 10px 0 20px;
    line-height: 40px;
    transition: ease-in-out 0.3s;
}

.dotcontain:hover{
    transform: scale(1.10); 
    color: #FFFFFF;
}

.dotcontain img{
    max-width: 100%;;
    max-height: 100%;
}

.backtohomepage a{
    color: #ffffff;
    text-decoration: none;
    display: table-cell;
    vertical-align: middle;
    padding-bottom: 5px;
    position: relative;
    font-size: 20px;
    line-height: 40px;
}

HTML

<div class="loginheadercontain">
        <div class="dotcontain backtohomepage">
            <img src="047_-_homepage-512.png">
        </div>
        <div class="backtohomepage">
            <a href="../Index.html">Back to homepage</a>
        </div>
    </div>

What if you triggered the hover function from the root / 'loginheadercontain' ? — Jonas Praem, Nov 01 '18 at 09:17

score 0 · Accepted Answer · answered Nov 01 '18 at 09:19

start the transition when you hover on loginheadercontain div.

.loginheadercontain{
    width: 100%;
    display: flex;
    padding-top: 20px;
    height: 40px;
}

.dotcontain{
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    margin: 0 10px 0 20px;
    line-height: 40px;
    transition: ease-in-out 0.3s;
}

.loginheadercontain:hover .dotcontain{
    transform: scale(1.10); 
    color: #FFFFFF;
}

.dotcontain img{
    max-width: 100%;;
    max-height: 100%;
}

.backtohomepage a{
    color: #000;
    text-decoration: none;
    display: table-cell;
    vertical-align: middle;
    padding-bottom: 5px;
    position: relative;
    font-size: 20px;
    line-height: 40px;
}

<div class="loginheadercontain">
        <div class="dotcontain backtohomepage">
            <img src="047_-_homepage-512.png">
        </div>
        <div class="backtohomepage">
            <a href="../Index.html">Back to homepage</a>
        </div>
    </div>

CSS Hover a div and other div also hover

1 Answers1