logo标签列表

CSS鼠标悬停效果与精灵图和滑动门技术

cssuser-interfaceuibutton
3

我正在寻找一个例子，使用精灵图和滑动门技术结合的css鼠标悬停效果。

由于我对css不熟悉，所以希望提供一个完整的示例或链接。

我只是想要一个不固定宽度、有漂亮鼠标悬停效果并且可以添加图标的按钮（类似于Web Outlook）。

4个回答
3
以下内容基于这篇文章（http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/），但适用于a标签。
它类似于@xijo的答案，只有一些小的调整。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > 
<html>
<head>
<title>Test</title>

    <style type="text/css">
/* REQUIRED BUTTON STYLES: */       
a { 
    border: 0; 
    padding: 0;
    display:inline-block;
}

a span { 
    display: block; 
    white-space: nowrap;
    cursor: hand;
}

/* OPTIONAL BUTTON STYLES for applying custom look and feel: */     
a.submitBtn { 
    padding: 0 15px 0 0; 
    margin-right:5px; 
    font-size:2em; 
    text-align: center; 
    background: transparent url(btn_blue_sprite.gif) no-repeat right -140px; 
}

a.submitBtn span {
    padding: 13px 0 0 15px; 
    height:37px; 
    background: transparent url(btn_blue_sprite.gif) no-repeat left top; 
    color:#fff; 
}

a.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the     hover state with a script */
    background-position: right -210px; 
}

a.submitBtn:hover span, button.submitBtnHover span {
    background-position: 0 -70px;
}

    </style>
</head>
<body>
This is a bunch <a href="#" class="submitBtn"><span>Submit</span></a> of text.
</body>
</html>
2
我们曾经做过类似的事情，也许您会发现它有用。我们在锚点中使用了span，并为它们指定了以下CSS样式：
html:
<a href="example"><span>echo</span></a>

CSS：

a, a:visited {
  background:   url(left.png) no-repeat scroll left;
}

.tabContainer a span {
  background:   url(right.png) no-repeat scroll right;  
  margin:       0 0 0 21px;
  padding:      0 21px 0 0;
  float:        left;
}

然后像这样将其悬停：

.a:hover {
  background-position: -45px;
}

.a:hover span {
  background-position: -45px;
}

左右两侧当然要看起来成比例！ :) 希望这能帮助您解决CSS问题！ ;)
1

仅使用CSS无法实现真正的鼠标悬停或滑动效果。基本上，这两种技术都是基于“background-position”的。

也许这会对你有所帮助：

http://kailoon.com/css-sliding-door-using-only-1-image/

但使用JavaScript，您可以实现更好的鼠标悬停效果... :)请查看我的测试页面，并单击“单击以显示稍微高级的悬停;)”以查看它;)

www.arvag.net/test/jquery/

如果你想要类似的东西，只需说出来，我会尝试解释它。
0

嗯，这取决于你想要什么，但是假设你想要一个按钮，在鼠标悬停在上面时更改颜色，并且有一个小图像出现在旁边，那么你需要这样的东西：

HTML：

<ul>
<li>home<img src="sprite.png" width="16px" height="16px" alt="tinypic" /></li>
....

</ul>

CSS：

ul li img {
display: none;
}
ul li {
background: #FFFFFF;
}
ul li:focus, ul li:hover, ul li:active {
background: #000000;
}
ul li:focus li img, ul li:hover li img, ul li:active ul li img{
display: inline;
margin-right: -16px; // should stop the button expanding
}

但是正如我所说的，那只是一个非常基本的简化答案。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接