Question

此代码旨在创建两个链接区域（用于悬停），在页面的顶部50px和下一个较低的50px。因此，当您垂直移动鼠标时，您会击中两个悬停，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），以便我的链接悬停仅发生在图像的部分上？

Answer 1

首先，a#a1 img:hover或a#a2 img:hover不会选择img元素，因为img不与任何一个标签嵌套。另一方面，你想要的是当你将鼠标悬停在图像本身以外的某个元素上时，移动图像，但根据我的知识，这不是你可以在CSS中做的事情。您可能希望使用javaScript来实现此类功能。

Answer 2

在标签的背景上提供精灵图像是很好的。例如：

.read {
        background: url('../../img/home/home-assets.png')no-repeat  0 0;
    }
.read:hover {
        background: url('../../img/home/home-assets.png')no-repeat  0 -50px;
    }

你必须在css中定义背景位置。有关更多信息，请阅读以下内容：http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial，http://css-tricks.com/css-sprites/

如何在Sprite上创建悬停区域？

2 个答案: