html - 在链接的鼠标悬停时更改文本

Question

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

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

我在页面文件中的代码:

<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

这对你不起作用的原因:(不能确定，因为你没有链接你的代码)

<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