1

私はリストメニュー（ボタン）を持っていて、すべてのリスト項目テキスト（リンク1、2、3、4）の前にあるボタンに小さな画像を5ピクセルの左パディングで追加したいのですが、ホバーしたときにも残るはずですボタンの上にマウスを置きます。しかし、私はそれを行う方法を見つけることができないようです。

例として使用できる画像: http://forum.pictomio.com/images/emoticons/smiley_3_ico.gif

これは私のボタンリストのコードです:

html:

<div id="menupadding">
<div id="menu">
 <ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
 </ul>
</div>
</div>

CSS:

#menupadding {
    padding-top: 100px;
    padding-left: 302px;
}

#menu {
    margin:0;
    padding:0;
}

#menu li{
    display:block;
    list-style:none;
    padding-bottom:1px;
}

#menu ul{
    width: 140px;
    margin:0;
    padding:1px;    
}

#menu li a{
    display:block;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;

    color:#ffffff;

    text-decoration:none;

    background-color: #376596;

    padding-top:2px;
    padding-left: 20px;
    padding-bottom: 2px;    
}

#menu li a:hover{
    font-size:12px;
    color:#ffffff;
    padding-left: 40px;

    background-image: linear-gradient(bottom, rgb(0,65,139) 14%, rgb(33,42,66) 89%, rgb(0,0,0) 100%);
    background-image: -o-linear-gradient(bottom, rgb(0,65,139) 14%, rgb(33,42,66) 89%, rgb(0,0,0) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(0,65,139) 14%, rgb(33,42,66) 89%, rgb(0,0,0) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(0,65,139) 14%, rgb(33,42,66) 89%, rgb(0,0,0) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(0,65,139) 14%, rgb(33,42,66) 89%, rgb(0,0,0) 100%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.14, rgb(0,65,139)),
        color-stop(0.89, rgb(33,42,66)),
        color-stop(1, rgb(0,0,0))
);
}
4

1 に答える 1

1

以下のcssをこれで更新してください

#menu li a{
    display:block;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;

    color:#ffffff;

    text-decoration:none;

    background-color: #376596;

    padding-top:2px;
    padding-left: 20px;
    padding-bottom: 2px; 


     background-image:url('http://images.subeta.net/smilies/6398_emoticon_smile.gif');
        background-repeat:no-repeat;

}

ここをクリックしてライブをチェックできます

于 2013-05-03T17:01:22.467 に答える