时间戳

首页 > 解决方案 > 悬停 div 元素时如何解决此闪烁问题，此问题仅出现在 FireFox 浏览器中，它在 Opera 和 Chrome 浏览器中运行良好

html - 悬停 div 元素时如何解决此闪烁问题，此问题仅出现在 FireFox 浏览器中，它在 Opera 和 Chrome 浏览器中运行良好

问题描述

我正在尝试使用 CSS transform:translateX(100%) 属性在我悬停时移动Box2（红色）.box2 div 这个问题只出现在 Firefox 浏览器中，这在 Opera 和 Chrome 浏览器中运行良好（我没有在 safari 上检查这个）我试过 backface-visibility: hidden 属性，但它不起作用！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transform</title>
<style>
.box1{
  width:400px;
  height:400px;
  background-color:hsla(200,100%,20%);
  
 }
  
  .box2{
    width:50%;
    height:50%;
  background-color:red;
  
  
}
  
  .box2:hover{
  transform: translateX(100%);
  
}


</style>



</head>
<body>
  

  <div class="box1">
    <div class="box2"></div>
      
  </div>

</body>
</html>

标签： htmlcsstransform

解决方案

推荐阅读