组合悬停效果不起作用

Question

我希望tapped在.work-description悬停时也有一个底边框。

.project-link

Answer 1

我不确定您是否知道+ 被称为相邻选择器。它将仅选择前一个元素前面的元素。在这种情况下，具有work-description类的元素必须紧接在project-link类之后。

如果你有正确的html（如下例所示），你的代码就可以了。

.work-description {
    padding-top:50px;
    width:50%;
    margin:0 auto;
}
.project-link {
    font-size:3em;
    text-decoration:none;
}
.project-link:hover {
    border-bottom: 3px solid #000;
}
.project-link:hover + .work-description {
    border-bottom: 3px solid #000;
}

<input type="button" value="abcd" class="project-link">
<div class="work-description">some random text here</div>

希望这有帮助!!!