2

背景画像が要素のボックスの外に出られないことを理解しています。ただし、これは私の場合です。

各リスト項目にホバー効果が必要な水平リストがあり、小さな矢印が項目の上に置かれます。リスト項目はテキストと同じ高さであるため、背景を配置するだけでは機能しません。ボックスの外側にあるものはすべて切り取られます。

画像を保持するだけの各リスト項目内に追加の要素を含むソリューションについて読みました。

背景画像がボックス内にとどまるようにボックスを高くするなど、リスト項目の高さを単純に変更する方法はありますか?

4

1 に答える 1

2

これはあなたが探している答えですか？

http://jsfiddle.net/fmpeyton/G5VVj/1/

HTML:

<ul>
    <li><a href="#">Page1</a></li>
    <li><a href="#">Page2</a></li>
    <li><a href="#">Page3</a></li>
    <li><a href="#">Page4</a></li>
    <li><a href="#">Page5</a></li>
</ul>

CSS:

li{height: 50px; width:30px; margin:0 10px; float:left; list-style:none;}
li:hover{background: url('http://www.dreamtemplate.com/dreamcodes/web_icons/gray-bold-up-arrow-icon.png') top center no-repeat;}
a{padding:20px 0; display:block;}

:hover戦略は、要素内に要素を持ち、ホバーしたときに背景を変更する疑似クラスを親要素に与えることです。

于 2013-04-19T22:54:31.407 に答える