Question

我的网站代码有一个恼人的问题。每当我使用Microsoft Edge查看页面并将鼠标悬停在链接上时，其中一个边框将变为白色，直到您将鼠标悬停在另一个链接上，该链接会切换另一个边框。

＆＃13;

body {
  font-family: Sans-Serif;
  background-color: blue;
}

.Overhead {
  background-color: red;
  background-image: url('cats.jpg');
}

.Title {
  margin: 5px;
}

.Active {
  background-color: rgba(255, 255, 255, 1);
}

.Menu {
  overflow: hidden;
}

.Menu a {
  transition: .5s ease;
  display: block;
  text-align: center;
  text-decoration: none;
  color: grey;
  padding: 5px;
  float: left;
  width-max: 50px;
  background-color: rgba(255, 255, 255, 0.5);
}

.Menu a:visited {
  color: grey;
}

.Menu a:hover {
  background-color: rgba(255, 255, 255, 1);
}

＆＃13;

<div class="Overhead">
  <h1 class="Title">Title</h1>
  <div class="Menu">
    <a class="Active" style="background-color: rgba(255,255,255,1);"><b>Home</b></a>
    <a><b>About</b></a>
    <a><b>Service</b></a>
    <a><b>Contact</b></a>
  </div>
</div>

＆＃13;

我正在寻找一种更改CSS的方法，以便边框停止显示。我试图完全摆脱边界，但那并没有奏效。有什么方法可以解决这个问题吗？

Answer 1

如果您不想要边框，请执行此操作 border: 0px solid black; 如果你看到一个边框，这将使它没有边框。

在你的代码中，没有边框，所以如果你看到边框，请使用

。

注意：它可能只是border: 0px;，但我还没试过。

$('.a').mouseenter(function() { $(this).css("border", "0px") $(this).css("background-color", "rgba(255, 255, 255, 1)"); $(this).css("transition", "0.3s"); }); $('.a').mouseleave(function() { $(this).css("border", "0px") $(this).css("background-color", "rgba(255, 255, 255, 0.5)"); $(this).css("transition", "0.3s"); });

body { font-family: Sans-Serif; background-color: blue; } .Overhead { background-color: red; background-image: url('cats.jpg'); } .Title { margin: 5px; } .Active { background-color: rgba(255, 255, 255, 1); } .Menu { overflow: hidden; } .Menu a { transition: .5s ease; display: block; text-align: center; text-decoration: none; color: grey; padding: 5px; float: left; width-max: 50px; background-color: rgba(255, 255, 255, 0.5); } .Menu a:visited { color: grey; } .head { border: 0px solid black; } #service { margin-left: 0.4px; } #contact { margin-left: 0.35px; } } #container { background-color: rgba(255, 255, 255, 0.5); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="Overhead"> <h1 class="Title">Title</h1> <div class="Menu"> <div id="container"> <a class="Active" style="background-color: rgba(255,255,255,1);"><b>Home</b></a> <a id="about" class="a"><b class="head">About</b></a> <a id="service" class="a"><b class="head">Service</b></a> <a id="contact" class="a"><b class="head">Contact</b></a> </div> </div> </div>

Answer 2

我可以复制你的问题。它不是边框，但实际上两个半透明的白色背景在Ms Edge中重叠，并创建一个更大胆的白线。您可以在菜单中的项目之间添加边距，或者更好的解决方案是将background-color: rgba(255, 255, 255, 0.5);应用于.Menu（为菜单项设置透明背景并在悬停时保持过渡到白色背景）。

Answer 3

如果您正在使用Microsoft Edge，这是因为它是Edge浏览器的故障。您需要对其进行编辑，以便在MS Edge中进行渲染或立即使用它。尝试在导航栏项之间放置空格

CSS边界在MS Edge

3 个答案: