鼠标悬停时更改图像地图的背景
在我的网站中,我有一个图像作为导航栏,并创建了热点将它们链接到不同的页面。问题是由于文本是图像的一部分,我无法更改悬停时文本的样式。虽然我希望文本/热点在鼠标悬停时突出,所以我了解到背景颜色可以在鼠标悬停时更改。这可能吗?有没有办法在 CSS 中使用区域或地图来做到这一点。如果要使用Javascript,有人可以帮助我吗?
In my website I have an image as the navigation bar and have created hotspots to link them to different pages. The problem is since the text is a part of the image, I cannot change the style of the text on hover. Whereas I want the text/the hotspot to stand out on mouseover, so I learn the background color could be changed on mouse over. Is that possible? Is there a way to do that in CSS, using the area or maps. If Javascript is to be used, could someone help me out with it.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您使用单个图像作为导航栏有什么原因吗?
我不会为每个导航链接使用单独的图像,而不是带有热点的单个图像。这样你就可以在悬停时轻松更改图像(或使用 CSS 图像定位)。此处描述:
http://css-tricks.com/ video-screencasts/7-two-state-menu/
以及我确信的许多其他地方。
Is there a reason you've used a single image as the nav bar?
Instead of a single image with hotspots, I'd use an individual image for each navigation link. That way you can easily change the image (or use CSS image positioning) on hover. This is described here:
http://css-tricks.com/video-screencasts/7-three-state-menu/
along with many other places I'm sure.
我认为既不使用图像映射也不使用单个图像不是一个好主意。
相反,使用 CSS 精灵:单个图像文件,将其作为背景图像添加到菜单链接,但以不同的方式放置背景图像。请参阅此第 25 行教程更多信息。
I don't think it's a good idea to use neither image maps nor individual images.
Instead, use CSS sprites: a single image file, add that as a background image to the menu links, but position the background images differently. See this Line 25 tutorial for more information.