小贝子编程

锚定标记CSS样式未应用

  • 本文关键字：样式 应用 CSS css
  • 更新时间 :
  • 英文 :


我不知道如何解释，但我刚刚开始编码和学习。

我对HTML和CSS的基础知识非常熟悉。我一直在想，为什么当我把鼠标悬停在H1上时，它会变成蓝色，并且有一条下划线是蓝色的。我只想要一行，而且我希望它是金色的。

body {
background-image: url(https://i.pinimg.com/originals/5c/e5/5f/5ce55f2b0cedcf3bfedef36dfa38df33.jpg);
}
h1 {
font-family: Orbitron, sans-serif;
color: white;
text-align: center;
margin-top: 300px;
}
h2 {
font-family: Orbitron, sans-serif;
text-align: center;
color: white;
}
.name {
position: relative;
color: gold;
}
.name::before {
background-color: gold;
}
.name::after {
color: gold;
text-decoration-color: gold;
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: gold;
transform: scaleX(0);
transform-origin: left;
transition: transform 250ms ease-in;
}
.name:hover::after {
transform: scaleX(1);
color: gold;
border-color: gold;
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon-bar a:hover {
background-color: #d9d9d9;
}
.facebook {
background: #3B5998;
color: white;
border-radius: 50%;
position: absolute;
left: 300px;
top: 300px;
}
.twitter {
background: #55ACEE;
color: white;
border-radius: 50%;
position: absolute;
left: 340px;
top: 120px;
}
.google {
background: #dd4b39;
color: white;
border-radius: 50%;
position: absolute;
left: 500px;
top: 50px;
}
.linkedin {
background: #007bb5;
color: white;
border-radius: 50%;
position: absolute;
left: 600px;
top: 340px;
}
.youtube {
background: #bb0000;
color: white;
border-radius: 50%;
position: absolute;
left: 650px;
top: 240px;
}
.aboutme {
background-image: url();
margin-top: 500px;
}
.table {
text-align: center;
color: #fe019a;
margin: 1000px 10px;
display: inline;
margin-left: 575px;
}
.phone {
width: 2%;
position: absolute;
margin-left: 36%;
margin-top: 100px;
border-radius: 50%;
}
<!doctype html>``
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Drake Coleman</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="icon" href="favicon_io/android-chrome-512x512.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<div class="">

<h1><a class="name" href="#">Drake Coleman</a></h1>
</div>
<h2>Jr. Developer</h2>
<div class="icon-bar">
<a href="https://www.facebook.com/dra.drizzy/" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/DraDraDrizzy" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="google"><i class="fa fa-google"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
<br>
<div class="aboutme">
<h1>Classified Information</h1>
<img class="phone" src="PHONE.png" alt="">
<table class="table">
<tr>
<td>Age</td>
<td>29</td>
</tr>
<tr>
<td>Birthdate</td>
<td>February 26th, 1991</td>
</tr>
<tr>
<td>Phone Number</td>
<td>260-7100-7671</td>
</tr>
<tr>
<td>Address</td>
<td>Columbus, Ohio</td>
</div>
</table>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

您的h1中有一个a标记。默认情况下，对于大多数浏览器，a标记的样式都是这样的。

有了这个规则，一切都是正确的：

h1 a:hover {
text-decoration: none;
color: gold;
}


body {
background-image: url(https://i.pinimg.com/originals/5c/e5/5f/5ce55f2b0cedcf3bfedef36dfa38df33.jpg);
}
h1 {
font-family: Orbitron, sans-serif;
color: white;
text-align: center;
margin-top: 300px;
}

h1 a:hover {
text-decoration: none;
color: gold;
}
h2 {
font-family: Orbitron, sans-serif;
text-align: center;
color: white;
}
.name {
position: relative;
color: gold;
}
.name::before {
background-color: gold;
}
.name::after {
color: gold;
text-decoration-color: gold;
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: gold;
transform: scaleX(0);
transform-origin: left;
transition: transform 250ms ease-in;
}
.name:hover::after {
transform: scaleX(1);
color: gold;
border-color: gold;
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon-bar a:hover {
background-color: #d9d9d9;
}
.facebook {
background: #3B5998;
color: white;
border-radius: 50%;
position: absolute;
left: 300px;
top: 300px;
}
.twitter {
background: #55ACEE;
color: white;
border-radius: 50%;
position: absolute;
left: 340px;
top: 120px;
}
.google {
background: #dd4b39;
color: white;
border-radius: 50%;
position: absolute;
left: 500px;
top: 50px;
}
.linkedin {
background: #007bb5;
color: white;
border-radius: 50%;
position: absolute;
left: 600px;
top: 340px;
}
.youtube {
background: #bb0000;
color: white;
border-radius: 50%;
position: absolute;
left: 650px;
top: 240px;
}
.aboutme {
background-image: url();
margin-top: 500px;
}
.table {
text-align: center;
color: #fe019a;
margin: 1000px 10px;
display: inline;
margin-left: 575px;
}
.phone {
width: 2%;
position: absolute;
margin-left: 36%;
margin-top: 100px;
border-radius: 50%;
}
<!doctype html>``
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Drake Coleman</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="icon" href="favicon_io/android-chrome-512x512.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<div class="">

<h1><a class="name" href="#">Drake Coleman</a></h1>
</div>
<h2>Jr. Developer</h2>
<div class="icon-bar">
<a href="https://www.facebook.com/dra.drizzy/" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/DraDraDrizzy" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="google"><i class="fa fa-google"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
<br>
<div class="aboutme">
<h1>Classified Information</h1>
<img class="phone" src="PHONE.png" alt="">
<table class="table">
<tr>
<td>Age</td>
<td>29</td>
</tr>
<tr>
<td>Birthdate</td>
<td>February 26th, 1991</td>
</tr>
<tr>
<td>Phone Number</td>
<td>260-7100-7671</td>
</tr>
<tr>
<td>Address</td>
<td>Columbus, Ohio</td>
</div>
</table>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

问题是，当您将鼠标悬停在名称的<a>标记上时，将应用<a>标记的默认:hover样式。您需要更改此项以删除text-decoration，并将字体颜色更改为金色。

.name:hover {
text-decoration: none;
color: gold; 
}

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium