CSS:需要菜单文本悬停效果(双重样式)帮助

标签 css navigation

一段时间以来,我一直在努力解决这个问题,并决定看看你们中是否有人可以提供一些关于这个主题的信息。

我有一个菜单/导航,页面标题在顶部以粗体显示,下面是较浅的描述(见下图)。

image1 http://cl.ly/5yiV

悬停时,我希望菜单项显示如下:

image2 http://cl.ly/5ylG

我想要它让两行文本都改变颜色,无论是顶部的“关于我”还是底部的“我是谁?”悬停在。

目前,我目前只能让任一条线在悬停时改变颜色。

谁能帮我解决这个问题?

最佳答案

如果你将两个部分都包装成一个链接,你应该能够做到这一点:

<a href="#">ABOUT ME<span>Who Am I?</span></a>

然后你可以使用这样的样式:

a:hover {color:blue;}
a:hover span {color:red;}

你当然会使用类来使用更复杂的样式..但你应该从我的简单示例中得到要点(如果我正确理解你的问题。)

编辑:working example

关于CSS:需要菜单文本悬停效果(双重样式)帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5655130/

相关文章:

css - 可清除输入覆盖标签填充

javascript - 模拟类似应用程序的滑动来切换移动网站上的页面

css - 我应该在哪里使用 CSS 供应商前缀

html - 双向文本中的数字和标点符号呈现

Angular2 路由。请求的路径在索引 1 处包含未定义的段

javascript - 显示事件箭头 onclick(垂直导航?)

android - 如果当前 fragment 未知,如何导航到 fragment ?

jquery - 检索选项的背景颜色时 .css 在 firefox 中的奇怪行为

html - 如何在容器高度的上下文中正确调整按钮

java - PrimeFaces 中的面包屑标签不起作用