Question

我有一个问题，希望我能得到答案。我正在尝试从头开始创建一个网站（不使用Dreamweaver，Expression Web等），我只使用笔记本。我想要完成的是在标签中创建两个导航链接作为翻转CSS精灵图像（使用伪类元素：悬停），我希望稍后在页面中移动。上周，我花了很多时间试图解决这个问题但没有成功。我去过www.w3schools.com和这个网站也找到了解决方案，但似乎仍然无法使其正常工作。我也在一个严格的环境中，只允许我在Win7操作系统上使用一个浏览器（IE8）。请原谅我糟糕的CSS编码;这是我的第一次尝试。

目前我正在使用HTML中的两个链接：

<div id="linkbox">
<ul class="GoogleFrame">
<li class="Google"><a href="www.google.com"></a></li>
</ul>
<ul class="BingFrame">
<li class="Bing"><a href="www.bing.com"></a></li>
</ul>
</div>

以下是我使用上述HTML的CSS：

#linkbox {
  width: 312px;
  height: 388px;
  background: url('images/container.png');
  padding: 0px;
  margin: 0px;
  position: fixed;
  left: 0px;
  top: 410px;
  z-index: 1
}

.GoogleFrame {
  position:fixed;
  left: 10px; 
  top: 100px
}

.GoogleFrame li {
  list-style:none;
  position:absolute;
}

.GoogleFrame li, .GoogleFrame a {
  height:54px;
  display:block;
}

.Google {
  left:0px;
  width:260px;
  background: url('images/google.png') 0px 0px;
}

.Google a:hover {
  background: url('images/google.png') -261px 0px;
}

非常感谢任何帮助或指导！

Answer 1

对于CSS精灵图像，你可以这样做：

<强> HTML

<ul>
    <li>
        <a href="#">text</a>
    </li>

    <li>
        <a href="#">text</a>
    </li>

    <li>
        <a href="#">text</a>
    </li>
</ul>

<强> CSS

ul {width:100px;}
li { margin-bottom:5px; }
li a {
    text-indent:-9999em; /* hide our text */ 
    display:block; 
    height:40px; 
    background:url('http://placekitten.com/100/80') no-repeat 0 0; 
}

li a:hover { background-position:0 -40px;}

<强> JSFiddle Demo

您的想法是，您有1张图片，并显示其中的一半，然后使用:hover，您可以更改图片的background-position以显示on/off州

Answer 2

@Nick R

谢谢尼克！我按照上面的JSFIDDLES中的示例进行了操作，并通过以下内容找到了解决问题的方法：

HTML

<ul>
 <li class="Google">
    <a href="#">Google</a>
 </li>
 <li class="Bing">
    <a href="#">Bing</a>
 </li>
</ul>

CSS

ul {
  width:260px;
  position: fixed;
  left: 1px;
  top: 200px;
  z-index: 1
}

li { 
  margin-bottom:5px;
}

li a {
  text-indent:-9999em; /* hide our text */ 
  display:block; 
  height:44px;
}

li.Google a {
  background: url('images/google.png') 0px 0px;
  no-repeat 0 0;
}

li.Google a:hover {
  background-position: -260px 0px;
}

li.Bing a {
  background: url('images/google.png') -520px 0px;
  no-repeat 0 0;
}

li.Bing a:hover {
  background-position: -779px 0px;
}

再次感谢！ 竖起大拇指

创建CSS Sprite：悬停滚动图像链接

2 个答案: