CSS：如何自定义悬停功能，如“产品搜索”卡上显示的内容

Question

问题

在“产品搜索”上，将鼠标悬停在卡片上时，它将颜色更改为较深的灰色。然后，当您到达注释框时，它将卡更改为白色，但现在将注释框更改为较深的灰色（如下图所示）。

将鼠标悬停在评论框上时，卡片的其余部分如何恢复为正常颜色？

我尝试过的东西

作为入门级CSS和Web开发人员，我最初认为它是z-index，但实际上不是。有谁知道如何做到这一点？

在此先感谢您的帮助，?

Answer 1

假设html中的每个卡片元素如下所示：

<div class = "card">
    <img src = "avatar.jpg">
    <h1> Color Palette generator </h1>
    <h3> Generate a random color palette ..... </h3>
    <div class = "comment-box">
        <icon ....
        <span> 13 <span>
    </div>
</div>

如果只想使用CSS进行操作，则可以尝试将该元素括在div中，将其相对位置分配给卡，将绝对位置分配给按钮，然后在其中添加Z索引。

.card {
    position : relative    
}
.comment-box {
    position : absolute;
    top : any;
    left : any;
    z-index 99: 
}
.comment-box:hover {
    backgroud : gray;
}

您也可以尝试javascript事件。 您可以创建一个事件，以根据用户互动将焦点类别分配给元素。

在样式表中，您会执行以下操作

.focus {
     background: gray;
}

在您的js文件中执行以下操作

let card = document.querySelector('.card')
let c-box = document.querySelector('.comment-box')

card.addEventListener ('mouseover', function () {
    this.classList.add('focus')
})

c-box.addEventListener('mouseover', function(){
    card.classList.remove('focus')
    this.classList.add('focus')
})

现在，当您将鼠标悬停在div卡上时，焦点类将被添加到其中，而当您将鼠标悬停在注释div上时，该类将被从div卡中删除并被添加到注释框中。

当然可以完善它，您应该使用querySelectorAll并使用FOR循环遍历每个元素来聚合事件，但是希望我能为您提供帮助