- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
当用户将鼠标悬停在链接上时,我会显示一个图像元素——这是可行的。
我现在想让该图像在用户返回网站时始终对他们可见...由于 :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/
我看过的每个示例和样式表都使用 a:visited 来设置链接样式。除了a:visited具有更高的特异性,:visited不应该是等价的和更简单的吗? 最佳答案 TL;DR:在撰写本文时,您是完全正
每当我激活 Woocommerce 时,Woocommerce 都会在 Wordpress 的管理栏中添加“访问商店”。这导致我在那里同时拥有“访问站点”和“访问商店”。 但是,我真的看不出这样做有什
我已经看到了两种方式的例子,特别是维基百科展示了一个例子,其中被访问的对象决定了访问顺序,我认为这是一种听起来很合理的方法。 我处于需要多个访问顺序的情况,因此让访问者决定访问顺序似乎是合理的。但是,
我的网站上有我的帖子模型。我的帖子模型有一个存储访问的列。当用户访问我的帖子时,应该递增 1。我完全知道该怎么做,但我的问题是当我在我的模型中将它递增 1 时,它递增 2!!!!! 我在我的 Cont
使用 C++14,我使用 boost::variant作为编译时多态的一种方式: using MyType = boost::variant; 这两个类都有一个方法 sayHello() .我想调用:
我在使用 a:visited(或另一个可能?)伪类时遇到问题。我想让链接在不同的元素中显示为不同的颜色(.link-box 中的黑色和#main-menu 中的红色,无论它们是否被访问过),他们首先这
nav ul li a:link, a:visited nav ul li a, visited 第一次,我使用方法1 为导航栏中的链接设置颜色。然后,当我在 section 中创建链接时,它采用存储
我已经在 IE F12 开发人员工具下运行了我的 Sharepoint 网站,控制台在我的 HTML 开头提到了以下错误:- SEC7115: :visited and :link styles ca
这篇文章的目的是什么? 在 bigquery 中,我需要使用 caveat 删除重复的行 对于访问者访问具有相同页面名称的页面,重复发生在同一次访问中。 分组不能解决问题 下面,我已尽我所能解释数据、
我有这个 php 代码: mysqli_query($link, 'UPDATE `blog_posts` SET `visit` = `visit` + 1 WHERE `id` = ' . $po
我有一张表,其中包含访问、已完成的应用程序和批准,每行作为邮政编码,我试图将表转换为每行是访问的表。由于我在 Excel 中,我试图在 VBA 中编写一个宏来执行此操作,但这给了我一些不准确的地方。这
我有一个列出信息的页面,您可以在其中单击链接以获取更多详细信息。这些链接中的大多数都是正常的(即没有类),但在某些链接上我设置了类“未发布”(用于未发布的更改),其中样式设置为 color: red
我有一个列出信息的页面,您可以在其中单击链接以获取更多详细信息。这些链接中的大多数都是正常的(即没有类),但在某些链接上我设置了类“未发布”(用于未发布的更改),其中样式设置为 color: red
我在一个数学网站上工作,它有一些练习,页面底部有解决方案。我想让解决方案在用户滚动时隐藏起来,并且需要单击该 block 才能显示答案。我只想使用 css 和 html 来实现这一点。这是我到目前为止
在我的浏览器中,Mac OS 上的 Chrome,文本装饰和背景颜色不适用于以下代码: http://jsfiddle.net/5CYHZ/10/ 为什么会这样? 最佳答案 Mozilla出于隐私原因
我无法在 Firefox 或 IE 中处理 a:visited 超链接 如果我设置 a:visited 的背景颜色,它会正常工作,但不透明度不会设置。 有什么想法吗? 这是我的CSS: a.photo
我正在尝试使用 std::visit 来检查 std::variant。 首先,我声明变体和变体的基(可调用)访问者类: #include #include #include using Ama
我有一个页面,我们在其中显示嵌入式画面仪表板,并且在同一页面上有一个下拉菜单,用户可以使用该下拉菜单加载不同的仪表板,单击我调用的下拉选项 Turbolinks.visit(url, {action:
我想更改页面上两个链接的访问颜色。我有办法做到这一点吗? 最佳答案 仅在您想要不同访问颜色的链接上放置一个类,例如: Different 在 CSS 中,然后以您想要的任何方式设置已访问过的链接类别的
不确定这是否可能,而不必经过几次传递,但我无论如何都会问(我的 XSL 有点生锈) 我有一个 XML 文档,其中包含如下节点:
我是一名优秀的程序员,十分优秀!