时间戳

首页 > 解决方案 > 有没有更优雅的方式来为按钮创建高光？

css - 有没有更优雅的方式来为按钮创建高光？

问题描述

.menu-item {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: rgb(66, 66, 66);
}

.highlight {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: rgb(121, 121, 121);
  border-radius: 8px;
  display: none;
}

.menu-item:hover .highlight {
  display: inline;
}
<div class="menu">
  <div class="menu-item">
    <div class="highlight"></div>
  </div>
  <div class="menu-item">
    <div class="highlight"></div>
  </div>
</div>

有没有办法在不使用额外的 div 元素的情况下实现这种高亮效果？我尝试使用径向渐变径向渐变，但我认为这不适用于圆角方形高光。

标签： css

解决方案

将背景颜色向上移动.menu

.menu {
  display: inline-block;
  background-color: rgb(66, 66, 66);
}

.menu-item {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.menu-item:hover {
  background-color: rgb(121, 121, 121);
}
<div class="menu">
  <div class="menu-item"></div>
  <div class="menu-item"></div>
</div>

使用伪选择器：

.menu-item {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: rgb(66, 66, 66);
}

.menu-item::before {
  content: '';
  display: none;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  border-radius: 8px;
  background-color: rgb(121, 121, 121);
}

.menu-item:hover::before {
  display: block;
}
<div class="menu">
  <div class="menu-item"></div>
  <div class="menu-item"></div>
</div>

推荐阅读