在链接的鼠标悬停时更改文本答案

【问题标题】：Change Text on mouse hover of a link在链接的鼠标悬停时更改文本
【发布时间】：2015-06-14 10:44:29
【问题描述】：

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

不幸的是，这个解决方案对我不起作用。我使用“简单自定义 CSS”插件包含了 CSS，并包含了示例中所示的 html 代码。链接在那里，但没有显示任何文本。当我离开“显示：无”部分时，我看到所有三个文本块。我究竟做错了什么？

我在页面文件中的代码：

<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;
}

【问题讨论】：

通过发布您的代码向我们展示您已经完成的工作：)
好的，我用代码更新了我的问题。
好的，现在，当鼠标悬停在一个、两个或三个上时，你希望代码做什么
更改代码下方的文本，例如“您将链接 1 悬停”或“这会导致网站 blablabla”
jsfiddle.net/kyamct30 你的代码有效吗？编辑 -> 你了解代码的作用吗？

标签： html css hyperlink mousehover textchanged

【解决方案1】：

这对你不起作用的原因：（不能确定，因为你没有链接你的代码）

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

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

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

这可能是你的问题：class="a-1" & class="element-1"，如果您希望链接在鼠标悬停时更改颜色，您只需使用

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

【讨论】：

感谢您的回复。但我不想改变链接的颜色。将鼠标悬停在链接上时，我想在 [其他地方] 更改文本。
更新了问题:)

【解决方案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

【讨论】：

感谢您的回复，但请参阅我对 Katherina 的评论

【解决方案3】：

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

从 1 导航到 2 - 在此文件中 >style.css

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

不过，正如 Katherina 所说，我们需要查看您的代码！

【讨论】：

代码是这样的：jsfiddle.net/audetwebdesign/p7WUu 将它包含到这个文件中也没有帮助。
这个当然有效 - 但我们需要看到的是您的 wordpress 站点的输出，您想在哪里嵌入它 - 也许 !important 可以完成这项工作
我已经尝试了 !important。输出可以在这里测试：wordpress.slipstreamgx.com/weaponry
嘿，检查一下这个关于 ~ stackoverflow.com/questions/10782054/… 的问题尝试将 a 和元素放在一个 div 中，也许包装 p 会切断这些元素之间的连接
太棒了。在 HTML 代码周围放置
解决了这个问题。如何将您的评论标记为答案？非常感谢:)

【解决方案4】：

moesphemie 的回答：

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

【讨论】：