时间戳

首页 > 解决方案 > 样式化除了在 CSS 中选择的所有类实例

html - 样式化除了在 CSS 中选择的所有类实例

问题描述

给定一个具有多个类.element实例的应用程序，我想要这样的东西：

.element:hover rest {
    opacity: 0.5
}

其中“rest”指的是 .element 的所有其他实例，除了悬停的那个。上面代码的期望功能是 .element 的所有实例都变得不透明，而悬停的元素仍然没有样式。

这可能不使用javascript吗？

标签： htmlcss

解决方案

这完全取决于您的 HTML 的结构。

如果元素共享可用作不透明度更改触发器的共同祖先，则您可能会获得您正在寻找的结果。

.parent:hover .child {
  opacity: 0.5;
}

.parent .child:hover {
  opacity: 1;
}
<div class="parent">
  <div class="child">
    Lorem ipsum
  </div>
  <div class="child">
    Lorem ipsum
  </div>
  <div class="child">
    Lorem ipsum
  </div>
</div>

推荐阅读