我知道这是一个基本问题,但我无法更改链接的颜色,所以你能帮帮我吗?
在此代码中,我通常有一部小电影,其中包含指向我网站页面的描述/超链接
(先是 CSS,然后是 HTML)
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
top:100px;
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
/* Add some content at the bottom of the video/page */
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
font-family:Century Gothic;
}
/* Style the button used to pause/play the video */
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
font-family:Century Gothic;
font-size:25px;
}
#myBtn:hover {
background: #ddd;
color: black;
}
#links:link {
color:inherit;
text-decoration:none;
transition:color 1s;
}
#links:hover {
color:white;
}
<div class="main">
<!-- The video -->
<video autoplay muted loop id="myVideo">
<source src="vid/test.mp4" type="video/mp4">
</video>
<!-- Optional: some overlay text to describe the video -->
<div class="content">
<h1>La Team en action!</h1>
<p>Viens voir toute la team NoMaD en action! Disponible sur <span id="links"><a href="https://www.youtube.com/channel/UCx9wXRznZvavCSXkbrJoDYw?view_as=subscriber">YouTube</a></span>, <span id="links"><a href="https://www.twitch.tv/teamn0mad">Twitch</a></span>, et <span id="links"><a href="https://www.instagram.com/la_team_nomad">Insta</a></span>.</p>
<!-- Use a button to pause/play the video with JavaScript -->
<button id="myBtn" onclick="location.href = 'contact.html';">Réseaux</button>
</div>
</div>
请帮帮我!我必须学习基础知识……(我已经在其他教程中看到了,但它不起作用……)。
最佳答案
您需要将此样式应用于 <a>
标签,而不是 <span>
.但更重要的是,您使用的是相同的 ID links
两次,这是不合法的。改为将其更改为一个类:
<p>Viens voir toute la team NoMaD en action! Disponible sur <span id="links"><a href="https://www.youtube.com/channel/UCx9wXRznZvavCSXkbrJoDYw?view_as=subscriber">YouTube</a></span>, <span class="links"><a href="https://www.twitch.tv/teamn0mad">Twitch</a></span>, et <span class="links"><a href="https://www.instagram.com/la_team_nomad">Insta</a></span>.</p>
然后更改您的 CSS 以选择此类而不是 id:
.links a {
color:inherit;
text-decoration:none;
transition:color 1s;
}
.links a:hover {
color:white;
}
关于html - 链接的默认颜色不会改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51310675/