Question

我想做一件简单的事情：单击按钮时，我的按钮将更改背景颜色。

我正在使用样式组件，伪类:focus :visited :target不起作用。我还尝试将div更改为锚链接。

奇怪的是，:hover可以工作，但是上面提到的不能工作。

const Box = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 18px;
   box-shadow: 0 5px 5px rgba(17, 16, 62, 0.1);
   font-size: 16px;
   font-weight: 700;
   border: 2px solid rgb(74, 165, 234);
   border-radius: 3px;
   background: white;
   cursor: pointer;

&:hover {
   box-shadow: 0 5px 5px rgba(17, 16, 62, 0.15);
}

&:focus {
   background: rgb(104, 173, 226);
   color: white;
}`

我希望单击该按钮后即可更改背景颜色。但是它什么也没做。

Answer 1

div不能聚焦。使用实际的<button>（当然应该是styled.button），或给它一个tabindex：

div,
button {
  padding: 0.5em;
  border: 1px solid hotpink;
  width: 50%;
  font-size: 1rem;
}

div:focus,
button:focus {
  background: hotpink;
}

<div>div without tabindex</div>
<button>button</button>
<div tabindex="0">div with tabindex</div>

焦点HTML元素：https://gist.github.com/jamiewilson/c3043f8c818b6b0ccffd

Tabindex值：https://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex

如何将按钮集中在带有样式组件的单击上？

1 个答案: