我的问题很简单，
text-decoration:none - 当用户将鼠标悬停在 <a> 上时，在此示例中不起作用标签。我的错误在哪里？
我提供了整个元素来帮助您理解我想要实现的目标。下面有一个代码片段显示了我的代码与当前问题。
提前谢谢你们。
* {
font-family: "Helvetica Neue";
font-size: 22px;
text-decortion:none!important
}
.container {
color: #a2abbd;
width: 100%;
height: 100%;
background-color: #21212b;
}
.radio-container {
overflow: hidden;
position: relative;
margin: 7% auto;
height: 504px;
width: 320px;
background-color: #2c2c37;
border-top: 1px solid #f1be81;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
}
header {
text-align: center;
vertical-align: middle;
line-height: 79px;
height: 79px;
background-color: #edae61;
color: white;
font-weight: bold;
}
header a {
display: block;
position: absolute;
width: 60px;
height: 80px;
}
header .arrow {
left: 0;
top: 0;
}
header .arrow img {
margin-bottom: 5px;
}
header .on-off {
right: 0;
top: 0;
}
header .on-off img {
margin-bottom: 10px;
margin-right: 7px;
}
section {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul {
position: relative;
padding: 0;
margin: 11px 23px 0px 23px;
line-height: 1.364;
}
section ul li {
border-bottom: 1px solid #40404a;
list-style-type: none;
overflow: hidden;
}
section ul li:last-child {
border: none;
}
section ul li a {
display: block;
padding: 18px 0px 14px 0px;
cursor: pointer;
width: 100%;
height: 100%;
color: #a2abbd;
text-decoration: none;
}
section ul li a:hover p {
color: #848b9b;
}
section ul li a p {
display: inline;
}
section ul li a p strong {
float: right;
clear: both;
}
section ul li a p img {
padding-right: 0.5em;
padding-bottom: 0.2em;
}
section ul .dribbleFM {
position: relative;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul .dribbleFM .dribble-anchor {
position: absolute;
top: -200px;
z-index: 1;
}
section ul .dribbleFM .dribble-anchor:target {
top: 18px;
margin-bottom: 18px;
position: relative;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul .dribbleFM .dribble-anchor:target + .dribble-button1 {
display: none;
}
section ul .dribbleFM .dribble-anchor:target ~ .dribble-button2 {
display: block;
}
section ul .dribbleFM .dribble-anchor .volume {
pointer-events: none;
position: relative;
}
section ul .dribbleFM .dribble-anchor .volume a {
position: relative;
display: inline;
pointer-events: auto;
z-index: 100;
}
section ul .dribbleFM .dribble-anchor .volume .img-main {
margin-left: 33px;
margin-right: 33px;
padding-top: 40px;
padding-bottom: 40px;
}
section ul .dribbleFM .dribble-anchor .volume .clickable {
padding-top: 5px;
padding-bottom: 8px;
}
section ul .dribbleFM .dribble-button2 {
display: none;
}
footer {
position: absolute;
bottom: 0;
height: 79px;
width: 100%;
background-color: #22222b;
border-top: 1px solid #4d505c;
text-align: center;
vertical-align: middle;
line-height: 79px;
cursor: default;
}<html lang="en">
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatibile" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="netguru recruitment task">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="radio-container">
<header><a href="#" class="arrow"><img src="https://imageshack.com/i/id8QV4sap"></a>
<p>
STATIONS
</p><a href="#" class="on-off"><img src="https://imageshack.com/i/idUebcAVp"></a>
</header>
<section>
<ul>
<li><a href="#">
<p>
Putin FM<strong>66,6</strong>
</p></a></li>
<li class="dribbleFM">
<div id="dribble-anchor-on" class="dribble-anchor">
<div class="volume"><a href="#volume-up" class="clickable"><img src="https://imageshack.com/i/exjVsiWzp"></a><a href="#" class="img-main"><img src="https://imageshack.com/i/ipxUWXkvp"></a><a href="#volume-down" class="clickable"><img src="https://imageshack.com/i/idsjoKxsp"></a></div>
</div><a href="#dribble-anchor-on" class="dribble-button1">
<p>
Dribbble FM<strong>101,2</strong>
</p></a><a href="#dribble-anchor-off" class="dribble-button2">
<p>
Dribbble FM<strong>101,2 </strong>
</p></a>
</li>
<li><a href="#">
<p>
Doge FM<strong>99,4</strong>
</p></a></li>
<li><a href="#">
<p>
Ballads FM<strong>87,1</strong>
</p></a></li>
<li><a href="#">
<p><img src="http://imageshack.com/a/img661/6406/acyLmg.png">Maximum FM<strong>142,2 </strong></p></a></li>
</ul>
</section>
<footer>
<p>High quality</p>
</footer>
</div>
</div>
</body>
</html>最佳答案
默认情况下，您已经为 anchor 设置了 text-decoration:none。但是 text-decoration 不作用于 anchor 的悬停，因为您没有为 :hover 状态指定它。
对于 :hover，试试这个，
section ul li a:hover{text-decoration:none}
希望对您有所帮助!
关于html - 寻找 'tex-decoration:none' 问题 - 提供了完整的 HTML 和 CSS 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32786430/