Question

我试图为按钮添加css，它不起作用。

<button>Test<button>

CSS

.button:hover,
.button:focus,
.button:active {
  padding: 8px 18px;
}
.button:not(.button:after):hover,
.button:not(.button:after):focus,
.button:not(.button:after):active {
  padding: 8px 38px;
}

感谢提前

Answer 1

CSS不能像这样工作，你不能在:not()选择器中定位伪元素。

但是，如果您希望浏览器在用户将光标悬停在伪元素上时忽略，该伪元素本身与元素本身不重叠，则可以使用pointer-events属性执行此操作：

button {
  position: relative;
}

button:hover,
button:focus {
  color: red;
}

button::after {
  content: 'Pseudo-element';
  pointer-events: none;
  position: absolute;
    left: 0;
    top: 150%;
  text-align: left;
  width: 200px;
}

button:hover::after,
button:focus::after {
  color: initial;
}

<button type="button" autofocus>
  Button
</button>

with ::课后＆amp;没有::课后css不起作用

1 个答案: