Html CSS精灵链接不是';行不通
在我的博客中,我有两个相邻的CSS sprite图像(因为它们都有不同的尺寸,在HTML代码中,我将向您展示它们都只能有一个设置的高度和宽度)。我不知道为什么,但其中一个没有识别“hover”属性,链接也没有显示!还有一件事:它适用于JSFIDLE,但不适用于我的站点: 以下是我为这两个项目使用的代码: HTML:对于第一个精灵:Html CSS精灵链接不是';行不通,html,css,css-sprites,Html,Css,Css Sprites,在我的博客中,我有两个相邻的CSS sprite图像(因为它们都有不同的尺寸,在HTML代码中,我将向您展示它们都只能有一个设置的高度和宽度)。我不知道为什么,但其中一个没有识别“hover”属性,链接也没有显示!还有一件事:它适用于JSFIDLE,但不适用于我的站点: 以下是我为这两个项目使用的代码: HTML:对于第一个精灵: <!--Social Sprite Html--> <div id="head-soc"> <ul> <li id="Ba
<!--Social Sprite Html-->
<div id="head-soc">
<ul>
<li id="Banner"><a href="http://www.spaceheroesfansite.com/"></a></li>
</ul>
<!--Social Sprite Html http://www.spiceupyourblog.com-->
</div></div>
第二个精灵的HTML:
<!--Social Sprite Html2-->
<div id="head-soc2">
<ul>
<li id="Button1"><a href="http://www.spaceheroesfansite.com/p/about.html"></a> </li>
<li id="Button2"><a href="http://www.spaceheroesfansite.com/p/promo-codes.html"></a></li>
<li id="Button3"><a href="http://www.spaceheroesfansite.com/p/game-tricks.html"></a></li>
<li id="Button4"><a href="http://www.spaceheroesfansite.com/p/purple-jacket-squad.html"></a></li>
</ul>
<!--Social Sprite Html2--></div>
有人能帮忙吗?实际上,您的精灵和代码没有问题
:悬停
事件从不在#head-soc2 li a上触发
因为#head-soc2
留在#head-soc
后面
这个css技巧可以解决这个问题
#head-soc2 {
position:relative;
z-index: 999999;
}
#head-soc2 ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: visible ; height: 69px; width: 204px ;border: 0; background:
url(http://1.bp.blogspot.com/-o2ur7udOB4U/UqTYmUe5VYI/AAAAAAAADfo/sgHzbl3QFpw/s1600/bannersprite.png)
no-repeat; display: block;}
#head-soc2 li#Button1 a{background-position: -204px -479px;}
#head-soc2 li#Button1 a:hover {background-position: 0px -544px;}
#head-soc2 li#Button2 a {background-position: -204px -479px;}
#head-soc2 li#Button2 a:hover {background-position: 0px -544px;}
#head-soc2 li#Button3 a {background-position: -204px -479px;}
#head-soc2 li#Button3 a:hover {background-position: 0px -544px;}
#head-soc2 li#Button4 a {background-position: -204px -479px;}
#head-soc2 li#Button4 a:hover {background-position: 0px -544px;}
#head-soc2 {
position:relative;
z-index: 999999;
}