Question

嗨所以我试图制作一个链接到其他页面的导航菜单。但当我告诉它链接到某个地方时，我会得到这个丑陋的下划线和蓝色文字。我不想那样。我试过“text-decoration：none;”我已经搜索了一下这个话题。但它没有帮助：/感谢您的任何建议！

这是我的HTML：

<div id="box"> 
    <div id="items">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Contact</div>
        <div class="item"><a href="#">Donate </a></div>
      </div>
    </div>

    <div id="btn">
      <div id="top"></div>
      <div id="middle"></div>
      <div id="bottom"></div>
    </div>

这就是CSS

#box {
  position: fixed;
  z-index: 4;
  overflow: auto;
  top: 0px;
  left: -275px;
  width: 275px;
  opacity: 0;
  padding: 20px 0px;
  height: 100%;
  background-color: #f6f6f6;
  color: #343838;
  -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}

#box.active {
  left: 0px;
  opacity: 1;
}

#items {
  position: relative;
  top: 35%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);  
  text-decoration: none;
}

#items .item {
  position: relative;
  cursor: pointer;
  font-size: 23px; 
  padding: 15px 30px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
}

#items .item:hover {
  padding: 15px 45px;
  background-color: rgba(52, 56, 56, 0.2);
}

#btn {
  position: fixed;
  z-index: 5;
  top: 15px;
  left: 15px;
  cursor: pointer;
  -webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}

#btn div {
  width: 35px;
  height: 2px;
  margin-bottom: 8px;
  background-color:   #F5F5F5;
  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
  transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
}

#btn:hover > div { box-shadow: 0 0 1px  #F5F5F5; }

#btn.active { left: 230px; }

#btn.active div { background-color: #343838; }

#btn.active:hover > div { box-shadow: 0 0 1px #343838; }

#btn.active #top {
  -webkit-transform: translateY(10px) rotate(-135deg);
  -ms-transform: translateY(10px) rotate(-135deg);
  transform: translateY(10px) rotate(-135deg);
}

#btn.active #middle {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

#btn.active #bottom {
  -webkit-transform: translateY(-10px) rotate(-45deg);
  -ms-transform: translateY(-10px) rotate(-45deg);
  transform: translateY(-10px) rotate(-45deg);
}

Answer 1

你已经把手指放在上面了。（默认）下划线适用于链接，而不是#items。这些是您需要重新设计的元素：

#items .item a{
    text-decoration: none;
    color: inherit;
}

Answer 2

添加到a代码text-decoration

.items  a{
  text-decoration: none;
  color:#000;
}

文字装饰：无。不工作

2 个答案: