Question

我试图制作一个带背景图片的垂直导航栏。但是当我点击按钮时，他们变成了白色。我可以采取哪些措施让它们保持白色？就像，我已经尝试了我搜索的主要大纲，但它没有成功。

Answer 1

您是否尝试为按钮定义pseudo classes，链接？

/* unvisited link */
a:link {
    background-color: #ffffff;
}

/* visited link */
a:visited {
    background-color: #ffffff;
}

/* mouse over link */
a:hover {
    background-color: #ffffff;
}

/* selected link */
a:active {
    background-color: #ffffff;
}

Answer 2

我自己解决了这个问题。这是因为我的标记出错了。我在里面添加了

。但我仍然不知道为什么这是错的。这是代码簿：

    <div class="paintallblack">
  <div class="row">
    <!--let's row this.  Like, 1 md for vertical navbar, 5 md each for the rest -->
    <div class="col-md-1 verticalnav">
      <div class="nav nav-pills nav-stacked">
        <a class="btn" href="#mypic">
          A<br>b<br>o<br>u<br>t</a>
        <a class="btn" href="#">
            P<br>o<br>r<br>t<br>f<br>o<br>l<br>i<br>o</a>
        <a class="btn" href="#"> C<br>o<br>n<br>t<br>a<br>c<br>t</a>
      </div>
    </div>

    <div class="col-md-5 col-md-offset-1  leftcontent">
      <!--LEFT PART CONTENTS FOR ABOUT, PORT, AND CONTACT-->
      <img id="mypic" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-9/15940460_161286387692018_3963016562080030457_n.jpg?oh=6e79da88fff3df387121a5ac66a7de32&oe=59212A06" alt="mystupidface">
    </div>

    <div class="col-md-5 rightcontent">
      <!--RIGHT PART CONTENTS FOR ABOUT, PORT, AND CONTACT-->
      <p>Here I am, struggling to learn web development in order to build my own online magazine one day. Who am I? What do I do? In clear weather, I run. I can write stories, poetries, book reviews, compose musics, draw pictures. But nowadays my priorities
        are: run for my health, learn to code, and try to read and write science-fiction as frequent as I can.</p>
    </div>


  </div>

http://codepen.io/Hertzsprung/pen/JEKxwN

Answer 3

Bootstrap默认样式是

.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
    border-color: #fff;
}

覆盖样式btn-link border-color：#fff;不透明的这是

{{1}}

点击后如何让我的按钮保持透明？

3 个答案: