Question

我正在为一个学校项目建立一个网站，我试验了一个奇怪的错误。

我在菜单项上使用:: after和transform / transitions。它适用于所有浏览器，但右侧div中的标签上有动画仅限铬。

您可以在此处查看：http://mbrillaud.fr/gamejutsu/ 在菜单上悬停时，正确div的标签（动作，冒险等......）是＆＃34;剪切＆＃34;。

菜单的CSS：

.left a::after{
    content: '';
    display: block;
    height: 2px;
    background-color: #282C34;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transition: transform 0.1s;
}
.left a:hover::after{
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}

有人经历过这个或有想法吗？提前感谢您的帮助！

Answer 1

它实际上不是在悬停时剪切，它总是被剪裁，它是背面可见性显示。当您使用css过渡悬停时，Chrome会闪烁背面可见性。您可以通过应用此选项来阻止闪烁：

*, *:before, *:after {
    -webkit-backface-visibility: hidden;
}

这不会阻止你的标签被剪裁。将.game-label-tags上的行高改为1.6em，这将阻止剪辑，您不需要应用背面可见性黑客。

Answer 2

您可以使用背景（渐变或img）和背景大小。

a {
  text-decoration:none;
  color:black;
  background:linear-gradient(to top, black , black) no-repeat bottom center;
  background-size:0 2px;
  transition:0.1s;
}
a:hover {
  background-size:100% 2px;
}

<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Clients</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>

：bug之后（仅镀铬）

2 个答案: