link 鼠标悬停时更改文本

Question

我正在设计一个 wordpress 网站，想更改一组链接下的文本。我已经找到了这种款待，而且看起来很有希望： Solution to problem

不幸的是，这个解决方案对我不起作用。我使用 "Simple Custom CSS" 插件包含了 CSS 并包含了 html 代码，就像示例中显示的那样。链接在那里，但没有显示任何文本。当我离开 "display: none" 部分时，我看到了所有三个文本块。我究竟做错了什么？

我在页面文件中的代码：

<a href="#" class="a-1">one</a>
<a href="#"class="a-2">two</a>
<a href="#"class="a-3">three</a>
<div class="element-1">hello one</div>
<div class="element-2">hello two</div>
<div class="element-3">hello three</div>

我在自定义 css 文件中的代码：

.element-1, .element-2, .element-3{
     display: none;
}
.a-1:hover  ~ .element-1 {
     display: block;
}
.a-2:hover  ~ .element-2{
     display: block;
}
.a-3:hover  ~ .element-3 {
     display: block;
}

Answer 1

这对您不起作用的原因：（无法确定，因为您还没有 link 编辑您的代码）

<a href="#" class="a-1">one</a>

<div class="element-1">hello one</div>

您确定您导入了相同的类吗？

这可能是问题所在：class="a-1" & class="element-1" 对你来说，如果你想让 link 在鼠标悬停时改变颜色，你应该简单地使用

a:hover { 
    color: yellow;
}

如果你想为所有选项设置颜色：

a:link {
    color: #B2FF99;
}

a:visited {
    color: #FEFEFE;
}

a:hover {
    color: #323232;
}

a:active {
    color: #121211;
}

文章：http://www.w3schools.com/cssref/sel_hover.asp

Answer 2

我想这就是您要找的东西，如果找不到请告诉我。

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    background-color: #B2FF99;
}

a:visited {
    background-color: #FFFF85;
}

a:hover {
    background-color: #FF704D;
}

a:active {
    background-color: #FF704D;
} 
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>

Test this code here

Answer 3

看看我的 WP-Backend（德语，对不起；））

从 1 导航到 2 - 在此文件中 >style.css< 您可以编辑网站的样式。

在 3 中粘贴您的代码。请记住为您的元素使用相同的 id 和类！

但是就像 Katherina 提到的那样，我们需要查看您的代码！

Answer 4

moesphemie 的回答：

嘿，检查这个关于 ~whosebug.com/questions/10782054/… 的问题，尝试将 a 和元素放在一个 div 中，也许包装 p 会切断这些元素之间的连接

link 鼠标悬停时更改文本

Change Text on mouse hover of a link

html

css

hyperlink

mousehover

textchanged