Question

我正在制作一个菜单，我希望链接的hovercolour（在本例中为“Urenportaal”）填满按钮上方和周围的空间。现在它在菜单中显示一个正方形。我希望它触摸菜单的边框。我该如何解决这个问题？

当前代码：

.easyflexMenu {
  width: 150px;
  height: 500px;
  float: left;
  color: #ffffff;
  background-color: #229dfc;
  border-radius: 5px;
  /*bolling van de hoeken*/
  padding: 10px;
}

.easyflexMenu a {
  margin: 0px;
  padding: 3px 0px 3px 5px;
  width: 145px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  background-color: #229dfc;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.easyflexMenu a:active {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
}

.easyflexMenu a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

.easyflexMenu ul {
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  list-style-type: none;
}

ul,
menu,
dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

<div id="efmainmenu" class="easyflexMenu">
  <ul>
    <li id="urenportaal"><a href="urenportaal.tpsp?action=list&amp;s=79506f49627169694f7a30775150444c376a686770773d3d">Urenportaal</a></li>
  </ul>
</div>

Answer 1

您可以使用变换比例：

.easyflexMenu a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
  transform: scale(1.14);
  width: 144.5px;
}

在您的情况下，您需要稍微改变宽度以使其适合

＆＃13;

.easyflexMenu {
  width: 150px;
  height: 500px;
  float: left;
  color: #ffffff;
  background-color: #229dfc;
  border-radius: 5px;
  /*bolling van de hoeken*/
  padding: 10px;
}

.easyflexMenu a {
  margin: 0px;
  padding: 3px 0px 3px 5px;
  width: 145px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  background-color: #229dfc;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.easyflexMenu a:active {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
}

.easyflexMenu a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
  transform: scale(1.14);
  width: 144.5px;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

.easyflexMenu ul {
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  list-style-type: none;
}

ul,
menu,
dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

＆＃13;

<div id="efmainmenu" class="easyflexMenu">
  <ul>
    <li id="urenportaal"><a href="urenportaal.tpsp?action=list&amp;s=79506f49627169694f7a30775150444c376a686770773d3d">Urenportaal</a></li>
  </ul>
</div>

＆＃13;

Answer 2

你可以为 .easyflexMenu a添加一个轻微的负边距和更高的填充。

Answer 3

.easyflexMenu {
    width: 150px;
    height: 500px;
    float: left;
    color: #ffffff;
    background-color: #229dfc;
    border-radius: 5px;
}

.easyflexMenu a{
    margin: 0px;
    display: block;
    text-decoration: none;
    color: #ffffff;
    background-color: #229dfc;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

按上述方式更新CSS课程。

Answer 4

您需要在a:hover

中执行以下操作

使用margin: -10px
要使文本保持在相同位置，请用添加10px填充的填充覆盖a:hover填充。 padding: 13px 10px 13px 15px;

你的a：hover现在应该是这样的：

.easyflexMenu a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
  margin: -10px;
  padding: 13px 10px 13px 15px;
}

如果列表中有更多项目，那么这不是您想要的行为，您可以调整这些值。例如，如果您只希望填充转到边框，则可以使用此代码：

.easyflexMenu a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
  margin: 0px -10px 0px -10px;
  padding: 3px 10px 3px 15px;
}

使菜单项悬停颜色延伸到菜单的边缘

4 个答案: