Javascript 页面加载时初始激活的悬停/焦点状态

我有一个模块，通过悬停或焦点状态显示/隐藏内容

我想让第一部分中的隐藏内容在您第一次到达页面时可见，然后一旦用户参与模块，就让其当前功能接管

我尝试通过CSS使用

.color:first child

——在下面的代码笔中，我希望在页面加载时扩展的部分周围有一个红色边框

---

这是可以单独用CSS实现的，还是需要使用JS或JQuery？

您可以创建一个与悬停类样式相同的“活动”类，并仅将其应用于第一个类，但在与模块交互时不会将其删除。当其他div处于焦点/悬停状态时，您可以使用同级选择器覆盖它们，但当用户转到其他地方时，它会恢复。最终，您需要JS来检测某些东西被悬停/点击，并永久删除这些样式

.color:hover, .color.active {
    /* Change the flex-basis so that we know what
    size to transition to on hover. Arbitrary,
    based on our design/content.
  */
    flex-basis: 20em;
}

.color:hover .details, .color.active .details {
    opacity: 1;
}

还有一些JS检测到mouseover来删除该类，但您可以使用单击和/或您认为必要的任何其他事件：

const module = document.getElementsByClassName('color-list')[0];
module.addEventListener('mouseover', function() {
  const firstBox = document.getElementsByClassName('light-brown-55')[0];
  firstBox.classList.remove('active');
})

---

我制作了一个工作叉

您可以创建一个与悬停类样式相同的“活动”类，并将其仅应用于第一个，但在与模块交互时不会将其删除。当其他div处于焦点/悬停状态时，您可以使用同级选择器覆盖它们，但当用户转到其他地方时，它会恢复。最终，您需要JS来检测某些东西被悬停/点击，并永久删除这些样式

.color:hover, .color.active {
    /* Change the flex-basis so that we know what
    size to transition to on hover. Arbitrary,
    based on our design/content.
  */
    flex-basis: 20em;
}

.color:hover .details, .color.active .details {
    opacity: 1;
}

还有一些JS检测到mouseover来删除该类，但您可以使用单击和/或您认为必要的任何其他事件：

const module = document.getElementsByClassName('color-list')[0];
module.addEventListener('mouseover', function() {
  const firstBox = document.getElementsByClassName('light-brown-55')[0];
  firstBox.classList.remove('active');
})

我做了一个工作叉