如何在精灵上创建悬停区域？
此代码旨在创建两个链接区域（用于悬停），位于页面顶部 50 像素和下一个较低的 50 像素。这样，当您垂直移动鼠标时，您会点击两次悬停，并且 img 会横向移动。
<html>
<head>
<style type="text/css">
a {display:block; left:0; height:50px; width:300px;}
a#a1{top:50;}
a#a2{top:100;}
a img {position: absolute; top:0; left:0; width:300px;}
a#a1 img:hover {left: 50px;}
a#a2 img:hover {left: 100px;}
</style>
</head>
<body>
<a id="a1" /><a id="a2" /><img src="smiley.gif" />
</body>
</html>
我也可以通过重新定位背景图像或使用图像映射来完成此任务。
如何调整链接（包含 img）的大小，以便我的链接悬停仅发生在图像的部分上？
This code is intended to create two linked regions (for the purpose of hovering), on the top 50px of page, and next lower 50px. So that, as you move your mouse vertically, you hit the two hovers, and the img shifts laterally.
<html>
<head>
<style type="text/css">
a {display:block; left:0; height:50px; width:300px;}
a#a1{top:50;}
a#a2{top:100;}
a img {position: absolute; top:0; left:0; width:300px;}
a#a1 img:hover {left: 50px;}
a#a2 img:hover {left: 100px;}
</style>
</head>
<body>
<a id="a1" /><a id="a2" /><img src="smiley.gif" />
</body>
</html>
I would also be fine with accomplishing this by re-positioning a background image, or with an image map.
How can I re-size a link (containing an img) so that my link hover only happens over part of the image?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
一方面，img 元素不会被
a#a1 img:hover或a#a2 img:hover选择，因为 img 没有嵌套在任何一个 a 标签中。另一方面，你想要的是当你将鼠标悬停在图像本身以外的某个元素上时，移动图像，但据我所知，这不是你可以单独在 CSS 中完成的操作。您可能希望使用 javaScript 来实现此类功能。For one thing, the img element will not be selected by
a#a1 img:hoverora#a2 img:hoverbecause img is not nested with either of the a tags. For another, what you want is when you hover over some element other than the image itself, shift the image, but this is not something you can do in CSS alone to my knowledge. You probably want to be using javaScript for this sort of functionality.最好在标签的背景上提供精灵图像。
示例：
您必须在 css 中定义背景位置。
有关更多信息，请阅读以下内容：http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial , http://css-tricks.com/css-sprites/
It's good to give sprite images on the background of the tag.
Example:
you have to define the background position in css.
for more information read these: http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial , http://css-tricks.com/css-sprites/