0

此代码旨在创建两个链接区域（用于悬停），位于页面顶部 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），以便我的链接悬停只发生在图像的一部分上？

4

2 回答 2

0

最好在标签的背景上提供精灵图像。例子：

.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/

于 2011-03-02T04:26:58.797 回答
0

一方面，img 元素不会被选择，a#a1 img:hover或者a#a2 img:hover因为 img 没有与任何一个 a 标签嵌套。另一方面，您想要的是当您将鼠标悬停在图像本身以外的某个元素上时，移动图像，但据我所知，这不是您可以仅在 CSS 中完成的事情。您可能希望将 javaScript 用于此类功能。

于 2011-03-02T03:26:48.803 回答