Question

我在将锚元素添加到菜单的某个部分时遇到了这个问题。我希望每个元素在鼠标悬停时在其后面显示透明的颜色块。同时，我希望页面背景有CSS条纹（背景：线性渐变;或背景：重复 - 线性渐变;）（我遇到这个问题）。当我在这些垂直条纹顶部有一个链接并将其悬停在它上面时，下面的条纹在一个方向上移动大约一个像素。它的效果非常小但却令人沮丧。我已从html和css中删除了未涉及此问题的所有其他元素，并将生成的文件放在此jsfiddle中：http://jsfiddle.net/bw9fk0y4/5/

＆＃13;

body {
  margin: 0px;
  padding: 0px;
  background: 
  repeating-linear-gradient(90deg,transparent, transparent 2%, rgba(0,0,250,0.2) 2%, rgba(0,0,250,0.2) 4%, transparent 4%); 
  }

div nav{
      position: relative;
      left: 250px;
      }

div nav a{
        margin: 5px;
        display: inline-block;
        padding: 10px;
      }

div nav a:hover{
          background-color: rgba(250,250,250,0.4);
        }

＆＃13;

<body>
    <div id = "container">
        <nav>
            <a href = "#">link 1</a>
        </nav>
    </div>
</body>

＆＃13;

我发现，由于某些原因，当锚点位于此页面的右侧时，我不会遇到此效果。如果它居中或靠近左侧或者甚至居中，我确实有这种效果，即使我通过设置固定宽度和CSS（margin：0 auto;）来定位它。如果有人知道如何解决这个问题，我会非常高兴。这只发生在chrome中。我尝试过使用浏览器特定的渐变，没有区别。我担心这只是CSS渐变效果不好的结果，因为它们在玩游戏时似乎很容易行为不端，但它们太方便了我不能轻易放弃它们。

悬停时CSS背景失真

0 个答案: