Question

请帮助我，我想将鼠标悬停在“ .home”上，以激活.dotcontain中的转换。首先，我尝试.backtohompage a：hover + .dotcontain，但它不起作用。我也尝试.backtohomepage a：hover> .dotcontain，但是当我将鼠标悬停在链接“ back to homepage”上时，.dotcontain没有激活并进行转换。谢谢

CSS代码

.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>

Answer 1

当您悬停在loginheadercontain格上时开始过渡。

.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悬停一个div，其他div也悬停

1 个答案: