css - 在鼠标悬停时更改图像贴图的背景

标签 css hover mouseover imagemap

在我的网站中,我有一个图像作为导航栏,并创建了热点以将它们链接到不同的页面。问题是因为文本是图像的一部分,我无法在悬停时更改文本的样式。虽然我希望文本/热点在鼠标悬停时突出显示,但我了解到背景颜色可以在鼠标悬停时更改。那可能吗?有没有办法在 CSS 中使用区域或 map 来做到这一点。如果要使用 Javascript,有人可以帮我解决吗。

最佳答案

您使用单张图片作为导航栏有什么原因吗?

我会为每个导航链接使用单独的图像,而不是带有热点的单个图像。这样您就可以在悬停时轻松更改图像(或使用 CSS 图像定位)。此处对此进行了描述:

http://css-tricks.com/video-screencasts/7-three-state-menu/

我敢肯定还有很多其他地方。

关于css - 在鼠标悬停时更改图像贴图的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1378106/

相关文章:

html - 使用 <center> 或 CSS 的区别?

css - Twitter Bootstrap 导航栏固定

css - 悬停时没有列表其余部分的单个 li 顶部边框

javascript - 当我将鼠标悬停在同一个元素上时,我希望它变暗 - Vanilla JS

javascript - 在 jQuery 中隐藏/显示 div 的子级

javascript - 追加 div 最多 5 次并忽略超过 5 次 - jQuery

javascript - 在单页应用程序中切换样式表

css - 悬停时如何停止当前正在运行的动画并更改样式

html - 内联元素在悬停时变为粗体时移动

jquery - Leaflet不同的悬停和点击事件