gpt4 book ai didi

html - 带有 :visited 的样式兄弟选择器

转载 作者:太空狗 更新时间:2023-10-29 15:11:14 25 4
gpt4 key购买 nike

当用户将鼠标悬停在链接上时,我会显示一个图像元素——这是可行的。

我现在想让该图像在用户返回网站时始终对他们可见...由于 :visited 选择器的限制,我下面的尝试(我认为)失败了。

有没有办法绕过这些限制,使这个方法起作用?我可以使用另一个选择器来达到同样的效果吗?

a {
text-decoration: underline;
color: black;
}

#image {
position: absolute;
visibility: hidden;
top: 30%;
left: 60%;
}

a:visited {
color: red;
}

a:visited + #image {
visibility: visible;
}

a:hover{
color: white;
transition: color .3s ease;
}

a:hover + #image{
visibility: visible;
}

最佳答案

我们可以这样做。

a {
text-decoration: underline;
color: black;
}

#image {
position: absolute;
visibility: hidden;
top: 30%;
left: 60%;
}

a:visited {
color: red;
}

a:visited + #image {
visibility: visible;
}

a:hover {
color: white;
transition: color .3s ease;
}

a:hover + #image {
visibility: visible;
}
<a href="#hello">Hello</a> - Click this to make it visited.
<img src="http://lorempixel.com/250/250/" alt="Image" id="image" />

您也可以通过使用 :target 属性来执行此操作。

a {
text-decoration: underline;
color: black;
}

#image {
position: absolute;
visibility: hidden;
top: 30%;
left: 60%;
}

a:visited {
color: red;
}

#image:target {
visibility: visible;
}

a:hover {
color: white;
transition: color .3s ease;
}

a:hover + #image {
visibility: visible;
}
<a href="#hello">Hello</a> - Click this to make it visited.
<img src="http://lorempixel.com/250/250/" alt="Image" id="image" />

MDN 中查看...

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:target pseudoclass example</title>
<style>
#hidden-element {
display: none;
}

#hidden-element:target {
display: block;
}
</style>

</head>
<body>
<p><a href="#hidden-element">Show the Hidden Element</a></p>
<div id="hidden-element">
<p>You have unhided me!</p>
</div>
</body>
</html>

关于html - 带有 :visited 的样式兄弟选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26981807/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com