CSS:菜单文本悬停效果(双重样式)需要帮助
一段时间以来一直试图解决这个问题,并决定看看你们中是否有人可以提供一些关于这个主题的线索。
我有一个菜单/导航,页面标题在顶部以粗体显示,下面有更简单的描述(见下图)。
当鼠标悬停在上面时,我希望菜单项显示如下:
< 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).
When hovered over, I want the menu items to display as follows:
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果将两个部分包装到一个链接中,您应该能够做到这一点,例如:
然后您可以使用如下样式:
您当然可以使用更复杂的样式和类的使用..但是您应该从我的简单示例中得到要点(如果我正确理解了你的问题。)
编辑:工作示例
You should be able to do it if you wrap both parts into a link like:
Then you can use styling like:
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
一旦您实际“悬停”在所选对象上,就会触发“悬停”事件。
如果您发布的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.