在链接的鼠标悬停上更改文本
我正在设计一个wordpress网站，并希望改变一组链接下的文本。我已经找到了这个待遇，它看起来很有希望：问题的解决
不幸的是，这个解决方案对我不管用。我包括使用“简单自定义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;
}回答 4
Stack Overflow用户
发布于 2015-04-09 12:46:40
莫斯菲米的回答：
嘿，检查这个关于~ stackoverflow.com网站/问询/10782054/…的问题，试着把a和元素放在一个div中，也许包装p切断了这些元素之间的连接
Stack Overflow用户
发布于 2015-04-09 07:24:43
这不适用于您的原因：(不能确定，因为您没有链接您的代码)
<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;
} 文章：hover.asp
Stack Overflow用户
发布于 2015-04-09 07:28:15
我想这就是你要找的，如果不让我知道的话。
<!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>在这里测试这段代码
https://stackoverflow.com/questions/29532208
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号