Question

我使用viewport-units-buggyfill来涵盖vw和vh指标。我必须在css中使用content来创建一个好的后备，一切正常但是，由于我不理解的原因，Safari不会让我为:hover设置动画。代码里面有css content，这里有问题（在Safari 8 / Mac和iOS8上测试）

https://fiddle.jshell.net/nc9chuod/

知道我做错了什么吗？

＆＃13;

div {
  border: 1px solid black;
  padding: 20px;
  position: fixed;
  width: 100vw;
  min-height: 50vh;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  content: "not-a-problem";
  overflow: hidden;
}
div:hover {
  -webkit-transform: translate3d(50vw, 0, 0);
  transform: translate3d(50vw, 0, 0);
  content: "not-working";
}

＆＃13;

<div id="transition"></div>

＆＃13;

Answer 1

content属性只能用于伪元素。

来自https://developer.mozilla.org/en-US/docs/Web/CSS/content：

内容CSS属性与:: before和:: after伪元素一起使用，以在元素中生成内容。

这可能是Safari中的突破（在Safari for Windows中测试和确认）。请尝试将content:"not-working";移至div:hover:after：

＆＃13;

div {
 border: 1px solid black;
 padding: 20px;
 position: fixed;
 width: 100vw;
 min-height: 50vh;
 -webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
 overflow: hidden;
}

div:hover {
 -webkit-transform: translate3d(50vw,0,0);
 transform: translate3d(50vw,0,0);
}

div:hover:after {
 content:"not-working";
}

＆＃13;

<div id="transition"></div>

＆＃13;

Answer 2

据我所知，内容不需要＆＃39;＆＃39;属性，因为它只用于：之前和之后：等等

我将：hover更改为margin-left：50％并获得相同的效果。

我不确定在safari中使用translate3d，因为我从未亲自使用过它。

如果您不知道哪些浏览器接受了什么，请查看此网站。 http://caniuse.com/

这就是我所做的。

div {
border: 1px solid black;
padding: 20px;
position: fixed;
width: 100vw;
min-height: 50vh;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
content: "not-a-problem";
overflow: hidden;

}

div:hover {
margin-left: 50%;
}

：在Safari中使用css内容中断悬停动画

2 个答案: