Question

我知道这听起来像是一个明显的问题和答案，但我花了很长时间试图解决这个问题，并且出于某种原因，没有一个答案对我不起作用。老实说，这可能是一个我无法抓住的简单明显的答案。但问题出在这里：我用HTML5，CSS和一些PHP制作网站。

问题是，我的链接显示为蓝色和紫色，并带有下划线。我知道这是他们应该看的样子，但我尝试了许多不同的方法来重新设置text-decoration: none和不同颜色等链接的样式。

这是我的CSS和带有链接的HTML部分：

* {
	padding: 0;
	margin: 0;
}

html, body {
	height: 100%;
	width: 100%;
}

a {
	text-decoration: none;
	color: brown;
}

.sidebar {
	width: 25%;
	height: 100%;
	float: left;
	background-color: #BC986A;
	overflow-y: scroll;
}

.side-option {
	width: 100%;
	height: 155px;
	background-color: #BC986A;
}

.side-option:hover, .side-option:focus {
	background-color: #DAAD86;
}

.side-name {
	font-family: "Indie Flower", cursive;
	font-size: 1.8em;
	margin: 2px 2px 0px 7px;
	padding: 5px 5px 0px 5px;
}

.side-image {
	width: 150px;
	height: 97px;
	margin: 0px 0px 0px 15px;
	border: 0.3em solid #FBEEC1;
}

.info {
	background-color: #659DBD;
	width: 75%;
	height: 100%;
	float: right;
}

#name {
	font-family: "Gloria Hallelujah", cursive;
	font-size: 50px;
	text-align: center;
	color: #FBEEC1;
}

#s-name {
	font-family: "Gloria Hallelujah", cursive;
	font-size: 20px;
	text-align: center;
	color: #FBEEC1;
}

#image {
	display: block;
	width: 384px;
	height: 256px;
	margin-left: auto;
	margin-right: auto;
	border: 0.5em solid #BC986A;
	margin-top: 10px;
}

#desc {
	font-family: "Rock Salt", cursive;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	color: #DAAD86;
}

<div class="sidebar">
	<a href="index.php?page=0"><div class="side-option">
		<h2 class="side-name">Brown Bear</h2>
		<img src="http://maxpixel.freegreatpicture.com/static/photo/1x/Animal-Brown-Bear-Beast-Bear-Teddy-Bear-Mammal-422682.jpg" class="side-image" alt="Brown bear standing in tall plants.">
	</div></a>

我不确定你是否需要这一切，但无论如何它都存在。

Answer 1

对于悬停颜色更改，您可以使用此css


   .sidebar a:hover{color:red; }

单击

后保持颜色焦点


  .sidebar a:focus{color:blue; }

Answer 2

1）您需要将代码从最后的</div></a>更改为：</div></a></div>
2）链接的样式可以根据它们所处的状态而有所不同。

    a:link - a normal, unvisited link
    a:visited - a link the user has visited
    a:hover - a link when the user mouses over it
    a:active - a link the moment it is clicked

您可以在https://www.w3schools.com/css/css_link.asp

中详细了解相关信息

* {
	padding: 0;
	margin: 0;
}

html, body {
	height: 100%;
	width: 100%;
}

a, a:link, a:visited{
	text-decoration: none;
	color: brown;
}

a:hover, a:active{
  color: green;
}

.sidebar {
	width: 25%;
	height: 100%;
	float: left;
	background-color: #BC986A;
	overflow-y: scroll;
}

.side-option {
	width: 100%;
	height: 155px;
	background-color: #BC986A;
}

.side-option:hover, .side-option:focus {
	background-color: #DAAD86;
}

.side-name {
	font-family: "Indie Flower", cursive;
	font-size: 1.8em;
	margin: 2px 2px 0px 7px;
	padding: 5px 5px 0px 5px;
}

.side-image {
	width: 150px;
	height: 97px;
	margin: 0px 0px 0px 15px;
	border: 0.3em solid #FBEEC1;
}

.info {
	background-color: #659DBD;
	width: 75%;
	height: 100%;
	float: right;
}

#name {
	font-family: "Gloria Hallelujah", cursive;
	font-size: 50px;
	text-align: center;
	color: #FBEEC1;
}

#s-name {
	font-family: "Gloria Hallelujah", cursive;
	font-size: 20px;
	text-align: center;
	color: #FBEEC1;
}

#image {
	display: block;
	width: 384px;
	height: 256px;
	margin-left: auto;
	margin-right: auto;
	border: 0.5em solid #BC986A;
	margin-top: 10px;
}

#desc {
	font-family: "Rock Salt", cursive;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	color: #DAAD86;
}

<div class="sidebar">
	<a href="index.php?page=0"><div class="side-option">
		<h2 class="side-name">Brown Bear</h2>
		<img src="http://maxpixel.freegreatpicture.com/static/photo/1x/Animal-Brown-Bear-Beast-Bear-Teddy-Bear-Mammal-422682.jpg" class="side-image" alt="Brown bear standing in tall plants."/>
    </div>
	</a>
</div>

Answer 3

a {
    text-decoration: none;
    color: brown;
}

是您需要更改以编辑<a href=""></a>链接

的地方

更改悬停选项：

a:hover {
    style it here
}

以及您网站上已访问过的链接：

a:visited {
    style it here
}

Answer 4

您询问了如何样式链接。

a{
    color: red;
    cursor: wait;
    font-size: 24px;
    transition: color 0.3s, text-shadow 0.3s;
    text-decoration: none;
}
a:hover{
    color: green;
    text-shadow: 1px 2px 3px #000;
    text-decoration: overline;
}
a:active{
    font-weight: 900;
}

<a href="https://example.com" title="Does this annoy you?">Working link.</a>

如何更改CSS中的链接样式？

4 个答案: