Question

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

当您第一次到达页面时，我希望第一部分中的隐藏内容可见，然后当用户使用该模块时，让其当前功能接管。

我尝试使用.color:first-child通过CSS隔离此部分-您会在该部分周围出现一个红色边框，我想在下面的代码笔中在页面加载时扩展该部分。

这是只能在CSS中完成的事情，还是需要使用JS或JQuery？

Answer 1

您可以创建一个与悬停类具有相同样式的“活动”类，并将其仅应用于第一个类，但是在与模块交互时不会将其删除。您可以使用同级选择器在其他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，但是您可以使用单击和/或您认为必要的其他任何事件：

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

我做了一个工作叉here

悬停/焦点状态最初在页面加载时激活

1 个答案: