Question

这是我的代码：https://codepen.io/LastSoldi3r/pen/OmjGgR

HTML：

<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://use.fontawesome.com/1ade2ea03e.js"></script>
</head>
<body>
<ul>
  <li><a class="active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
  <li><a href="#about"><i class="fa fa-info-circle" aria-hidden="true"></i> About</a></li>
  <li><a href="#portfolio"><i class="fa fa-folder-open" aria-hidden="true"></i> Portfolio</a></li>
  <li><a href="#contact"><i class="fa fa-address-book" aria-hidden="true"></i> Contact</a></li>
</ul>

<div class="container-fluid" style="margin-left: 10%; padding: 1px ;">
  <a name="home">
    <div class="row">
      <div class="col-md-12">
        <img width="100%" height="100%" class="code" src="http://cdn2.cloudpro.co.uk/sites/cloudprod7/files/java_0.jpg">
        <img class="nametag" src="http://i.imgur.com/12ZcxYW.png">
      </div>
    </div>
    </div>

<div class="container-fluid  text" style="margin-left: 10%; padding: 1px 16px;"> 
  <!--About Me-->
  <a name="about">
    <h2 align="center">About</h2><br>
    <div class="row">
      <div class="col-md-6">
        <p id="aboutMe">I earned my Associates of Science for Information Technology in 2015.  I am now working on my certification in Front End Web Development with the end goal of being a certified Full Stack Web Developer.  I am achieving this goal with the help of freeCodeCamp().</p>
        <div class="col-md-12">
          <h2 align="center">Skills</h2><br>
        </div>
        <div class="row">
    <div class="col-md-3 skills">
      <i class="fa fa-coffee"></i>
      <p>JAVA</p>
    </div>
    <div class="col-md-3 skills">
      <i class="fa fa-html5"></i>
      <p>HTML5</p>
    </div>
    <div class="col-md-3 skills">
      <i class="fa fa-css3"></i>
      <p>CSS3</p>
    </div>
    <div class="col-md-3 skills">
      <i class="fa fa-code"></i>
      <p>JAVASCRIPT</p>
    </div>
  </div>
      </div>
      <div class="col-md-6">
        <img width="50%" height="50%" src="https://scontent.fhsv1-1.fna.fbcdn.net/v/t1.0-9/15219976_10153891163957294_6687591802937802260_n.jpg?oh=dccd86082954a5d9d1764fbd53ad70dc&oe=5982B68A">
      </div>
    </div>
    <!--Portfolio-->
    <br><br>
    <a name="portfolio">
      <div class="well background">
        <h2 align="center">Portfolio</h2><br>
      </div>


</div>    
</body>
</html>

CSS：

body {
background-color: #011f4b !important;
margin: 0;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #b3cde0;
position: fixed;
height: 100%;
overflow: auto;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

li a.active {
background-color: #005b96;
color: white;
}

li a:hover:not(.active) {
background-color: #6497b1;
color: white;
}

#aboutMe {
font-size: 20px;
}

.code {
position: relative;
top: 0;
left: 0;
}

.nametag {
position: absolute;
top: 35px;
left: 60px;
}

.skills {
text-align: center;
font-size: 1.7em;
width: 110%;
}

.background {
background-color: #03396c !important;
}

我知道您可以在bootstrap中更改css以更改这些效果。然而，我正在学习和看到，因为我是新的我只是使用bootstrap网站上提供的链接而不是筛选css。如果你看我的笔，你会看到悬停在任何文本上都会使它变暗并在某些部分下划线。

我尝试过以各种方式覆盖代码。

我最近尝试过的，也是最常见的解决方案：

a.hover {text-decoration: none !important;}

这对我没有用，我还没有找到任何其他有效的解决方案。

Answer 1

将这个简单的代码添加到您的css文件中：

\\2+

以下是您的信息页显示方式：

html a:hover {
    text-decoration: none !important;
}

html a:hover {
    text-decoration: none !important;
}
body {
  background-color: #011f4b !important;
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 10%;
  background-color: #b3cde0;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #005b96;
  color: white;
}

li a:hover:not(.active) {
  background-color: #6497b1;
  color: white;
}

#aboutMe {
  font-size: 20px;
}

.code {
  position: relative;
  top: 0;
  left: 0;
}

.nametag {
  position: absolute;
  top: 35px;
  left: 60px;
}

.skills {
  text-align: center;
  font-size: 1.7em;
  width: 110%;
}

.background {
  background-color: #03396c !important;
}

Answer 2

你非常接近！

http://yoursite.com/https://www.google.com:443http://www.google.com/

以下是您正在寻找的分支示例： https://codepen.io/anon/pen/NjaobY

Answer 3

我刚刚将test.sketch Users/myuser/Documents/ test_translations Users/myuser/Documents/test_translations/ Users/myuser/Documents/test_translations/ folder does not exist Users/myuser/Documents/test_translations/ folder can't be created Script executed in 0.034733s添加到您现有的CSS中。 https://codepen.io/anon/pen/Lyzqxp

Answer 4

将a.hover替换为a:hover，它应该有效。

.hover 表示“名为hover的类”
：悬停表示“元素悬停时”

如果你正在使用Chrome，那么开发者工具（右击 - ＆gt;检查元素） - 或类似的firebug功能 - 将允许你查看在任何元素上呈现的css。

Answer 5

   gmail.com
   abc.com
   hotmail.com

https://codepen.io/houtan/pen/mmBvop

＆＃39;文字装饰：无！重要＆＃39;不使用bootstrap

5 个答案: