时间戳

首页 > 解决方案 > 为什么悬停状态不适用于 Safari？

html - 为什么悬停状态不适用于 Safari？

问题描述

在下面的代码段中，当我将鼠标悬停在 Safari 中定义的区域上时，我没有获得悬停状态。如果您在 Chrome 中查看此代码，则悬停状态可以正常工作（悬停时，播放按钮变为蓝色）。

为什么悬停状态在 Safari 中没有按预期工作？

try {
  document.body.querySelector(":focus-visible");
} catch (error) {
  var script = document.createElement("script");
  script.src =
    "https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js";
  document.body.appendChild(script);
}

document.querySelector("button").addEventListener("click", function () {
  alert("Button was clicked.");
});
.wistia {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  width: 800px;
  height: 600px;
  margin-top: 50px;
  border: 1px solid red;
}
.wistia__overlay {
  width: 100%;
  height: auto;
}
.wistia::before {
  display: block;
  content: "";
}
.wistia button.embed-youtube__play {
  background: url("https://nextiva.com/assets/svg/play-button.svg") no-repeat center center, rgba(33, 33, 33, 0.8);
  background-size: 40%;
  background-position: 55%;
  border: 0;
  border-radius: 50%;
  position: absolute;
  transition: all 0.2s ease;
  -webkit-transition: background 0.2s;
  width: 10%;
  height: 13%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.wistia:hover button.embed-youtube__play,
.wistia button.embed-youtube__play:focus-visible {
  background: url("https://nextiva.com/assets/svg/play-button.svg") no-repeat center center, #005fec;
  background-size: 40%;
  background-position: 55%;
}
.wistia_embed,
.wistia embed,
.wistia iframe {
  width: 100%;
  max-height: 100%;
}

button:focus-visible,
a:focus-visible,
a:focus-visible::after,
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible,
input[type=submit]:focus-visible {
  outline: 2px solid #005FEC;
  outline-offset: 4px;
  z-index: 10;
}
<div class="wistia">
  <button class="embed-youtube__play"></button>
</div>

标签： htmlcss

解决方案

也许是因为它看起来仍然不受支持：https ://caniuse.com/css-focus-visible 。

为什么你需要并且想要使用伪类focus-visible而不是focus？对您或用户（这里）有什么好处？

用焦点替换焦点可见并（如果它看起来适合您）删除播放按钮的这两个属性。

outline: 2px solid #005FEC;
outline-offset: 4px;

它工作正常。

推荐阅读