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

发布于 2024-11-01 07:19:26 字数 523 浏览 0 评论 0原文

一段时间以来一直试图解决这个问题,并决定看看你们中是否有人可以提供一些关于这个主题的线索。

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

image1 http://cl.ly/5yiV

当鼠标悬停在上面时,我希望菜单项显示如下:

< img src="https://i.sstatic.net/WuNZN.png" alt="image2"> http://cl.ly/5ylG

我想要它,以便两行文本都改变颜色,无论顶部 '关于我”或底部的“我是谁?”悬停在上面。

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

有人可以帮我解决这个问题吗?

Been trying to figure this one out for a while, and decided to see if any of you could offer some light on the subject.

I have a menu/navigation with the page title in bold at the top, and a lighter description beneath it (see image below).

image1
http://cl.ly/5yiV

When hovered over, I want the menu items to display as follows:

image2
http://cl.ly/5ylG

I want it so that both lines of text change colour whether the top 'About Me' or the bottom 'Who am I?' is hovered over.

At the moment, I'm currently only able to get either line to change colour on hover.

Could anybody please help me to solve this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

淡写薰衣草的香 2024-11-08 07:19:26

如果将两个部分包装到一个链接中,您应该能够做到这一点,例如:

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

然后您可以使用如下样式:

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

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

编辑:工作示例

You should be able to do it if you wrap both parts into a link like:

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

Then you can use styling like:

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

You would of course use more sofisticated styling with use of classes.. but you should get the point from my simple example (If I understood your question correctly.)

Edit: working example

腹黑女流氓 2024-11-08 07:19:26

一旦您实际“悬停”在所选对象上,就会触发“悬停”事件。
如果您发布的img本身只是一个对象,我认为您必须将其分成两部分,然后将它们放在一起,这样您就可以将悬停触发器设置到两个对象中,然后您将获得所需的效果结果。

the 'hover' event is triggered once you actually "hover" over a selected object.
If the img that you're posting is only one object itself, I think you'll have to divide it into 2 pieces and then put them together, that way you can set the hover trigger into both objects and you'll get the desired result.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文