Question

我当前的项目涉及设置一堆侧边栏链接，这样完成的设计如下所示： Finished design.

信封应该移动和重叠（即改变z-index），具体取决于当前具有的图标/文本：悬停状态。

我认为每个都是一个单独的PNG文件，但我得到了一个看起来像这样的精灵： Sprite

我有什么建议可以实现这个目标吗？通常我只是改变每个文本所在的列表元素的背景位置，但我不认为这是可能的，因为它们的重叠性质。他只需要以不同的方式出口吗？

非常感谢......

Answer 1

对我来说，精灵看起来很完美。最左边的图像用于书籍悬停时，第二张图片用于推特，第三张用于脸书，第四张用于电子邮件。我猜最后一个只是默认状态。使用纯css进行这项工作非常棘手：hover（但可能！），然而，使用javascript会非常容易。

对于纯css解决方案，带有精灵的div必须是所有文本元素的子元素，因此您可以根据以下内容更改背景：将鼠标悬停在父级（文本）上。如果不清楚，我可以为您提供一些示例代码。

编辑：

它不完美，但它是一个概念证明。

JsFiddle：http://jsfiddle.net/jp6fy/

CSS：

#side{
    position:relitive;
    height:341px;
    width:250px;
}

#link1{
    top:0;
}

.link{
    position:absolute;
    left:0;
    top:85px;
    height:85px;
    padding-left:160px;
    width:90px;
}

#image{
    position:absolute;
    top:-255px;
    left:0;
    z-index:-1;
    background:url(http://i.stack.imgur.com/I2Y4k.png) -720px 0;
    height:341px;
    width:150px;
}

#link1:hover #image{
    background-position:-540px 0;
}

#link2:hover #image{
    background-position:-360px 0;
}

#link3:hover #image{
    background-position:-180px 0;
}

#link4:hover #image{
    background-position:-0px 0;
}

HTML：

<div id='side'>
    <div class='link' id='link1'>
        email
        <div class='link' id='link2'>
            facebook
            <div class='link' id='link3'>
                twitter
                <div class='link' id='link4'>
                    book
                    <div id='image'></div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

有可能。（但很难看。）

由于:hover选择器只能影响触发元素内部（或直接相邻）的元素，因此解决方案是嵌套触发元素：(jsFiddle)

<style>
div {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 100px;
}
#image { background: black; }
#trigger1, #trigger1:hover #image { background: red; }
#trigger2, #trigger2:hover #image { background: green; }
#trigger3, #trigger3:hover #image { background: blue; }
</style>

<div id="trigger1">
  <div id="trigger2">
    <div id="trigger3">
      <div id="image"></div>
    </div>
  </div>
</div>

但最好是，你可以单独导出信封精灵（你当然可以使用CSS精灵）。这应该会给你更简单的HTML和CSS，一个更小的图像，你将避免使用嵌套的绝对定位元素，每个元素都有自己的坐标系。

Answer 3

我尝试了一种方法，它使标记相当简单，每个项目只有一个额外的非语义div：

<ul>
    <li id="email">
        <div class="background"></div>
        <em>Email</em> chris
    </li>
    <li id="facebook">
        <div class="background"></div>
        <em>Facebook</em> follow us
    </li>
    <li id="twitter">
        <div class="background"></div>
        <em>Twitter</em> your life away
    </li>
    <li id="book">
        <div class="background">
        </div><em>Book</em> a project
    </li>
</ul>

我将背景div的所有不同副本放在同一个地方，然后根据悬停状态改变背景位置：

/* First, just style the document and the list text in general. 
   skip on for the important bit */
body {
    background-color: black;
    color: white;
}
ul {
    width: 350px;
    margin-top: 40px;
    position: relative;
}
li {
    margin-right: 40px;
    font-family: "Century Gothic", Helvetica, sans-serif;
    text-align: right;
    margin-bottom: 0px;
    padding: 15px 4px 25px 0;
}
li em {
    text-transform: uppercase;
    display: block;
}
li:hover {
    color: red;
}

/* From here down is the important bit */

/* Set up the sprite in all the .background divs */
div.background { 
    background-image: url(http://i.stack.imgur.com/I2Y4k.png); 
    position: absolute;
    top: 0;
    left: 0;
    height: 341px;
    width: 160px;
}

/* By default, turn off the background in all the divs */
div.background {
    display: none;
}

/* Just picking an arbitrary item to show the default, non-hover background */
#email div.background  {
    display: block;
    background-position-x: -737px;
}

/* If we're hovering over the list as a whole, disable the default background,
   so it doesn't show up underneath the background we want to display */
ul:hover #email div.background {
    display: none;
}

/* For the email item, which shows our arbitrary default background, override
   to the email background on hover with more specificity than the default rule */
ul:hover #email:hover div.background {
    display: block;
    background-position-x: 0px;
}

/* For all other items, override to their background on hover */
#facebook:hover div.background {
    display: block;
    background-position-x: -375px;    
}

#twitter:hover div.background {
    display: block;
    background-position-x: -189px;

}

#book:hover div.background {
    display: block;
    background-position-x: -556px;    
}

Working, though slightly rough example, in this jsFiddle

请注意，可以在多个不同的div中拥有精灵的多个副本;浏览器只会为其缓存抓取一个副本，并将其用于图像的所有实例。

Answer 4

您是否可以创建图像映射，然后将图像悬停在前面带有正确信封的图像上。请在有趣的链接上查看此链接

google search link on idea

Answer 5

我的方法使用干净的HTML。

.nav { position: relative; }

.nav li {
  margin-left: 179.8px;
  list-style-type: none;
}

.nav li:before {
  position: absolute;
  left: 0; top: 0;
  content: url(http://i.stack.imgur.com/I2Y4k.png);
  clip: rect(0 899px 341px 719.2px);
  margin-left: -719.2px;
  z-index: 1;
}

.nav li:hover:before { z-index: 2; }

.email:hover:before {
  clip: rect(0 179.8px 341px 0);
  margin-left: 0;
}

.facebook:hover:before {
  clip: rect(0 359.6px 341px 179.8px);
  margin-left: -179.8px;
}

.twitter:hover:before {
  clip: rect(0 539.4px 341px 359.6px);
  margin-left: -359.6px;
}

.book:hover:before {
  clip: rect(0 719.2px 341px 539.4px);
  margin-left: -539.4px;
}

<ul class="nav">
  <li class="email">Email</li>
  <li class="facebook">Facebook</li>
  <li class="twitter">Twitter</li>
  <li class="book">Book</li>
</ul>

构建重叠，奇怪旋转的精灵

5 个答案:

编辑：