如何解决HTML CSS - 单击时使图标更改颜色如链接
当您点击一个链接时,它通常会变成紫色,这样您就知道您点击了该链接。通常在您刷新或离开页面后重置。有没有办法让图标(SVG 或 )在点击时表现得像一个链接?而不仅仅是最后一个点击。它将是每个被点击的图标。我试图使用 :visited 伪代码,但它不起作用。
.visit {
fill: lightblue;
}
.visit:visited {
fill: green;
}
<a href="#"><svg>
<rect width='300' height='100' class='visit'></rect>
</svg></a>
jQuery 和 JavaScript 的答案很好,但如果有一种方法可以只用 HTML 和 CSS 来做到这一点,那将是首选。
解决方法
:visited
是一个链接相关的伪类。它必须应用于 <a>
标记。
.visit {
fill: lightblue;
}
a:visited .visit { /* Fix here */
fill: green;
}
<a href="#"><svg>
<rect width='300' height='100' class='visit'></rect>
</svg></a>
像这样,并在 # 之后为每个要使用它的元素使用不同的数字。
.visit {
fill: lightblue;
}
a:visited .visit {
fill: green;
}
<a href="#1"><svg>
<rect width='300' height='100' class='visit'></rect>
</svg></a>
如果我正确理解了您的问题,您可以为此使用 active
伪代码。这将使得在这种情况下当链接处于活动状态(即点击)时变为绿色。
有关 active
伪代码的更多信息,请访问 this 站点
a {
padding: 10px;
}
.visit {
fill: lightblue;
}
.visit:active {
fill: green;
}
<a href="#"><svg>
<rect width='300' height='100' class='visit'></rect>
</svg></a><a href="#"><svg>
<rect width='300' height='100' class='visit'></rect>
</svg></a><a href="#"><svg>
<rect width='300' height='100' class='visit'></rect>
</svg></a><a href="#"><svg>
<rect width='300' height='100' class='visit'></rect>
</svg></a><a href="#"><svg>
<rect width='300' height='100' class='visit'></rect>
</svg></a>
这是一个工作示例!
.box {
width: 300px;
height: 300px;
}
.box * {
width: 100%;
height: 100%;
}
.box .visit {
fill: #ccc;
}
.box:link .visit {
fill: #999;
}
.box:hover .visit {
fill: #3f9;
}
.box:active .visit {
fill: #f93;
}
.box:visited .visit {
background: #39f;
}
<a href="#" class='box'>
<svg>
<rect class='visit'>
</rect>
</svg>
</a>