创建CSS精灵：将鼠标悬停在图像链接上 [英] Creating CSS Sprite :hover Roll Over Image Links

问题描述

我有一个问题，我希望我能得到答案。我试图从头创建一个网站（不使用Dreamweaver，Expression Web等），我只使用笔记本。我试图完成的是创建两个导航链接作为翻转CSS精灵图像（使用Pseudo-class元素：悬停）在我想稍后移动页面的标记中。上周我花了所有的努力试图解决这个问题，但没有成功。我去过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; 
位置：固定; 
 left：0px; 
 top：410px; 
 z-index：1 
} 
 
 .GoogleFrame {
 position：fixed; 
 left：10px; 
 top：100px 
} 
 
 .GoogleFrame li {
 list-style：none; 
位置：绝对; 
} 
 
 .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; 
} 
  

任何帮助或指导都将不胜感激！

解决方案

对于CSS精灵图片，您可以执行下列操作： / strong>

 < ul> 
< li> 
< a href =＃>文字< / a> 
< / li> 
 
< li> 
< a href =＃>文字< / a> 
< / li> 
 
< li> 
< a href =＃>文字< / a> 
< / li> 
< / ul> 
  

CSS

  ul {width：100px;} 
 li {margin-bottom：5px; } 
 li a {
 text-indent：-9999em; / *隐藏我们的文本* / 
 display：block; 
 height：40px; 
 background：url（'http://placekitten.com/100/80'）no-repeat 0 0; 
} 
 
 li a：hover {background-position：0 -40px;} 
  

JSFiddle Demo

这个想法是，你有一个图像，并显示它的一半，然后使用：hover ，你可以改变 background-position 显示开/关状态

I have a question that I hope I can get an answer to. I'm attempting to create a website from scratch (not using Dreamweaver, Expression Web, etc.), I'm using only notepads. What I'm trying to accomplish is creating two navigation links as rollover CSS sprite images (using Pseudo-class element :hover) within a tag that I would like to move around the page later. I've spent all of last week trying to resolve this issue with no success. I've been to www.w3schools.com and this site as well to find a solution, but still can't seem to get this to work correctly. I'm also in a strict environment that only allows me to use one browser (IE8) on a Win7 OS. Please pardon my lousy CSS coding; this is my first go at it.

Currently I'm using two links as shown below in 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>

Here is the CSS I'm using with the above HTML:

#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;
}

Any help or guidance will be greatly appreciated!

解决方案

For CSS sprite images, you can do something like this:

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

The idea is that you have 1 image, and you show half of it, and then using :hover you can change the background-position of the image to show the on/off state

这篇关于创建CSS精灵：将鼠标悬停在图像链接上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！