【问题标题】:How do I change the color of a hyperlink on mouse over of an image?如何在鼠标悬停在图像上时更改超链接的颜色?
【发布时间】:2012-04-12 14:39:27
【问题描述】:

我正在构建一个带有小饼图的网页。馅饼有 6 块,在这张图片的右侧,我有文本超链接,人们可以选择点击这些超链接,以转到点击馅饼将带它们的同一个地方。

悬停属性设置为更改鼠标悬停时超链接的颜色。有没有办法我也可以将鼠标悬停在图像饼块上并且仍然使文本超链接改变颜色,就像我悬停在它们上方一样?

谢谢。

【问题讨论】:

  • 您需要针对这种行为实施 javascript 解决方案。

标签: css hyperlink hover


【解决方案1】:

将它们包装在一个容器中,并将悬停功能应用于该容器。

jsFiddle example

CSS:

.container:hover a {
    color: black;
    text-decoration: none;
}

或者使用 CSS + 选择器来选择下一个兄弟元素
看到这个更新example

【讨论】:

  • 用不同的馅饼来做这件事很奇怪
  • 查看我的更新答案。现在它应该只选择下一个元素
  • 但您的饼图仍有问题。如何在不破坏饼图的情况下将容器中的所有饼图切片与链接集成?
  • 这实际上非常适合我的需求。多么酷的网站呢! (jsfiddle)。我不必使用馅饼来满足我的需要,所以我正在做一些改变来完成这项工作。非常感谢!
猜你喜欢
  • 2013-03-09
  • 1970-01-01
  • 2018-11-12
  • 1970-01-01
  • 2021-12-18
  • 1970-01-01
  • 2012-08-10
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多