是否有与：hover 相对的 CSS 伪类

发布于06月15日

CSS中是否有要指定的伪类

:not(:hover)

或者，这是指定没有悬停的项目的唯一方式吗？

我浏览了几个CSS3引用，没有提到CSS伪类来指定与hover相反的内容.

推荐答案

是的，使用:not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

.child {
  display: inline-block;
  background: #000;
  border: 1px solid #fff;
  width: 50px;
  height: 50px;
  transition: 0.4s;
}

.child:not(:hover) {
  opacity: 0.3;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

再举一个例子，我想你会想:100.

如果我的假设是正确的，并且假设您的所有 Select 器都在同一个父对象中:

.parent:hover .child{
  opacity: 0.2;      // Dim all other elements
}
.child:hover{
  opacity: 1;        // Not the hovered one
}

.child {
  display: inline-block;
  background: #000;
  border: 1px solid #fff;
  width: 50px;
  height: 50px;
  transition: 0.4s;
}

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

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

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

否则...只需使用默认逻辑:

.child{
  opacity: 0.2;
}
.child:hover{
  opacity: 1;
}

是否有与：hover 相对的 CSS 伪类

推荐答案

Css相关问答推荐

为什么我的CSS关键帧动画在循环之间稍微暂停？

设置项目的最大宽度和最大高度

寻找组件中最大的元素来设置其他组件的高度

靴子，为什么我不能让任何东西正确地排好队？

使用高图的背景大小渐变

.NET 8 预览版 6 中不使用新项目模板提供 Blazor CSS 文件

在 CSS 中跨列对齐文本基线

如何向 Highcharts 迷你图添加具有淡入淡出效果的线性渐变？

Bootstrap 和 Sass：将 SCSS 文件转换为 CSS 时出错.错误：$theme-colors-rgb 中未定义变量 @each $color、$value

CSS 网格 - 具有独立可滚动区域的两列布局

在不使用 position： fixed 的情况下从 CSS 网格中的自动布局中免除子元素？

CSS网格列随着长内容改变大小

如何在 flex-wrap 中优先考虑第一行？

CSS动画恢复默认

CSS，居中的 div，缩小以适应？

使用边距：0 自动；在 Internet Explorer 8 中

Select 标签的占位符

数据协议 URL 大小限制

我如何真正证明 HTML+CSS 中的水平菜单？

我的 inline-block 元素没有正确排列