时间戳

首页 > 解决方案 > CSS：如何在 Product Hunt 卡项目上自定义悬停

html - CSS：如何在 Product Hunt 卡项目上自定义悬停

问题描述

问题

在 Product Hunt 中，将鼠标悬停在卡片上时，它会将颜色更改为深灰色。然后，当您到达评论框时，它会将卡片变回白色，但现在将评论框更改为深灰色（如下图所示）。

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

我试过的

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



在此先感谢，任何帮助表示赞赏

悬停在评论框上的产品搜索

标签： htmlcssweb

解决方案

假设您的 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 循环遍历每个元素来聚合事件，但我希望我能对您有所帮助

推荐阅读