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

Question

我正在制作一个菜单，我希望链接的悬停颜色(在本例中为“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;
}

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

.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;
}

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