Question

我有一个简单的CSS转换，它会增加悬停时元素的大小。我想在焦点上做同样的事情，因为UI只能通过键盘来控制。我怎样才能做到这一点？如果我将:hover更改为:focus则无效。

  .card {
         height: 200px;
         width: 140px;
        /* margin: 20px;*/
         overflow: hidden;
         transition: box-shadow 0.15s ease-out, transform 0.25s ease;
         perspective: 600px;
         border-radius: 5px;
        
    }
     .card:hover {
         transform: scale(1.1);
         box-shadow: none;
    }
     .card.hover--ending {
         transition: box-shadow 0.5s ease;
    }

    <a href="/hello">
      <article class="card">
         <image type="image" src="https://icdn6.digitaltrends.com/image/google_1998-316x95.jpg" class="card__image posterImage focusable" />
      </article>
    </a>

Answer 1

您关注的是<a>，而不是.card。

尝试更改选择器。从（将会是什么）：

.card:focus {

要：

a:focus .card {

演示：

＆＃13;

.card {
     height: 200px;
     width: 140px;
    /* margin: 20px;
     */
     overflow: hidden;
     transition: box-shadow 0.15s ease-out, transform 0.25s ease;
     perspective: 600px;
     border-radius: 5px;

}
a:focus .card {
     transform: scale(1.1);
     box-shadow: none;
}
 .card.hover--ending {
     transition: box-shadow 0.5s ease;
}

＆＃13;

<input value="click me and hit tab">
<a href="/hello">
<article class="card">
      <image type="image" src="https://icdn6.digitaltrends.com/image/google_1998-316x95.jpg" class="card__image posterImage focusable" />
 </article>
 </a>

＆＃13;

如何使焦点而不是悬停使CSS过渡工作？

1 个答案: