Question

我依靠增加中心元素的顶部和底部填充来产生悬停效果，如下所示。

保持这种效果，有什么方法可以做到：

要为它们各自的图标腾出空间，请稍微降低文本（帮助和注销）（例如，我知道我可以进行position：relative，然后top：7px），但这会使鼠标悬停动画效果，因为“白色”扩展的中心应该在绿色标题的中心）
现在将文本放下，我想向两个“按钮”中的每个按钮添加一个透明的背景精灵-一个用于“帮助”的问号符号，另一个用于“注销”的符号。因此背景仍然是绿色，在绿色背景的上方，我将看到每个按钮的符号，以及每个符号下方的文本。如果我只是做 .help {background：url（）no-repeat -2px 0;}，例如，由于元素的高度增加，图像会随着悬停效果一起移动。

我将用于背景/图标的精灵的形式为： {url（../ theme / images / top_sprites.png）不重复-2px 0;}

那么如何在保留文本，绿色背景和动画的同时，将精灵作为这些“按钮”的图标呢？请注意，添加了边框以使动画/效果的工作方式更加清晰。

.header {
      height: 50px;
      background-color: #008b10;
}


.menu {

    padding: 16px;
    text-align:center;
    font-family: Raleway, arial, sans-serif;
    float:left;
    overflow: visible;
    border: 1px solid blue;
}

 .menu a:hover {

    background-color: #ffffff;
    color: #008b10;
    padding: 16px 5px;

}

.menu a {
    /*box-sizing: border-box;*/
    /*float:left*/
    text-decoration: none;
    transition: 0.4s;
    color: #ffffff;
    font-size: 13px;
    text-decoration: none;
    padding: 0 5px;
    border: 1px solid red;
}

<div class=header>
<div class="menu">
  <a class="help" href="#" id="online_help">Help</a>
  <a class="logout" href="#" onclick="openLogout();">Logout</a>
                </div>
</div>

Answer 1

.header {
      height: 50px;
      background-color: #008b10;
}


.menu {

    padding: 16px;
    text-align:center;
    font-family: Raleway, arial, sans-serif;
    float:left;
    overflow: visible;
    border: 1px solid blue;
}

 .menu a:hover {

    background-color: #ffffff;
    color: #008b10;
    padding: 16px 5px;

}

.menu a {
    /*box-sizing: border-box;*/
    /*float:left*/
    text-decoration: none;
    transition: 0.4s;
    color: #ffffff;
    font-size: 13px;
    text-decoration: none;
    padding: 0 5px;
    border: 1px solid red;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


<div class=header>
<div class="menu">
  <a class="help" href="#" id="online_help">Help <i class="far fa-question-circle"></i>

</a>
  <a class="logout" href="#" onclick="openLogout();">Logout <i class="fas fa-sign-out-alt"></i>

</a>
                </div>
</div>

Answer 2

---CSS---

a:hover {
    cursor: pointer;
}
.a-border {
    display: inline-block;
    position: relative;
    color: white;
    padding: 0.5rem 0.25rem;
    margin: 0 1.5rem;
    overflow: hidden;
}
.a-border::after {
    content: url("../img/more-btn-bottom.png");
    display: block;
    position: absolute;
    bottom: 0;
    left: -0.25rem;
    border: none;
    transform: scale(0, 1);
    transform-origin: 0% 100%;
    transition: transform 0.4s;
}
a:hover .a-border::after {
    transform:scale(1, 1);
}
a.focused .a-border::after {
    transform: none;
}

---JS---

function menuclick(underline) {
    var focused = document.getElementsByClassName("focused");
    var i;
    for (i = 0; i < focused.length; i++) {
        var under = focused[i];
        if (under.classList.contains('focused')) {
            under.classList.remove('focused');
        }
    }
    if (!underline.parentElement.classList.contains('focused')) {
        underline.parentElement.classList.add('focused');
    }
}

---HTML---

<a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
<a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
<a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
<a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>

Answer 3

您可以在锚点上为伪元素设置动画。

示例：

.header {
  min-height: 50px;
  background-color: #008b10;
}

.menu {
  padding: 0 16px;
  font-family: Raleway, arial, sans-serif;
  border: 1px solid blue;
}

.menu a {
  text-decoration: none;
  transition: 0.4s;
  color: #ffffff;
  font-size: 13px;
  padding: 16px 5px;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.menu a span {
  position: relative;
}

.menu a:before {
  transition: 0.4s;
  content: '';
  display: block;
  position: absolute;
  background: white;
  opacity: 0;
  transform: scaleY(.5);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.menu a:hover:before {
  transform: scaleY(1);
  opacity: 1;
}

.menu a img {
  max-width: 15px;
  display: block;
  position: relative;
  padding-bottom: 4px;
}

.menu a:hover {
  color: #008b10;
}

<div class=header>
  <div class="menu">
    <a href="#">
      <img src="https://unsplash.it/15">
      <span>Help</span>
    </a>
    <a href="#">
      <img src="https://unsplash.it/15">
      <span>Logout</span>
    </a>
  </div>
</div>

HTML / CSS：将图标添加到文本按钮

3 个答案: