Fatal编程技术网
  • html/
  • Html 如何在Sprite上创建悬停区域？

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

html css

Html 如何在Sprite上创建悬停区域？,html,css,hover,sprite,regions,Html,Css,Hover,Sprite,Regions,此代码旨在创建两个链接区域，用于悬停在页面的顶部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;

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

首先，由于img未嵌套任何一个标记，所以aa1 img:hover或aa2 img:hover不会选择img元素。另一方面，你想要的是当你把鼠标悬停在图像本身以外的元素上时，移动图像，但据我所知，这不是你单独在CSS中可以做的事情。您可能希望使用javaScript实现这类功能。

最好在标记的背景上提供sprite图像。 例如：

您必须在css中定义背景位置。 要了解更多信息，请阅读这些：，

离这里近吗？我不明白你想要什么，所以我猜了一下。 
.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;
    }