スプライト&スライディングドア技術を組み合わせてCSSロールオーバーを使用している例を見つけようとしています。スプライトとスライディングドアでCSSをロールオーバーする
私はcssを学んでいないので、完全な例への完全な例やリンクが理解できます。
私がしようとしているのは、幅が固定されていない<a href>のボタンで、素晴らしいロールオーバー効果とアイコンを追加する可能性があることです（ウェブの見通しに似ています）。
以下はこの記事（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>
CSSだけでは、実際のロールオーバーやスライド効果はありません。基本的にこれらの技術の両方は、「バックグラウンドポジション」に基づいています。
多分これがお手伝いします：
http://kailoon.com/css-sliding-door-using-only-1-image/
しかし、あなたがロールオーバー効果を見ている方がずっといいachiveできjavascriptの... :)私のテストページをチェックして、「少しを表示するにはクリックをクリックしてし高度なホバー;）」それを見るために;）
www.arvag.net/test/jquery/
あなたがそのような何かをしたい場合は、単に言うと、私はそれを説明しようとします。
私たちはこのようなことをしましたが、おそらくそれが役に立つかもしれません。アンカーでは、スパンを使用し、それらに次の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の問題を解決するのに役立ちます！ ;）
これは非常に可変ですが、マウスが上にくると色が変わり、その隣に小さな画像が表示されるボタンが必要な場合は、これがソートです事のあなたは、必要があるでしょう：
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
}
しかし、私が言ったように、それは非常に基本的なストリップダウン答えをだ
はすばらしく見える。 –