<分区>
<分区>
请帮助我，我想将鼠标悬停在“返回主页”上，以激活 .dotcontain 的转换。首先我尝试 .backtohompage a:hover + .dotcontain 但它不起作用。我也尝试 .backtohomepage a:hover > .dotcontain 但是当我将鼠标悬停在链接“返回主页”但 .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>
最佳答案
将鼠标悬停在 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>关于html - CSS 悬停一个 div 和其他 div 也悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53098158/