0

画像と背景色を同時に適用したいコードがあります。誰かがそれを手伝ってくれますか？

CSS

    .menu, .menu ul
{
    width:1000px;
    background-color: #F3F3F3;
    margin: 0;

}
.menu{  padding: 0; height:30px;}
.menu li
{
    float: left;
    padding-top:3px;
    height:20px;
    text-align:left;
    text-transform:uppercase; 
    position: relative; 
    display: block;
    font-family: Tahoma;
    font-size: 8px;
    font-weight:bold;
    text-align: center;
    text-decoration: none;
    padding:10px 15px 0 15px;
    background:url(../image/border.png) no-repeat right center;
}

.menu li:hover
{       
    background:#3EBBEC; 
    color: #FFFFFF;
}
.menu a { text-decoration: none; color:#000000; }
.menu a:hover { text-transform:lowercase; }

HTML

<ul class="menu">
   <a href="#"><li>A</li></a>  
   <a href="#"><li>B</li></a> 
   <a href="#"><li>C</li></a>
   <a href="#"><li>D</li></a>   
</ul>

これは、HTMLとCSSの両方のコードであり、画像と背景色を同時に適用する必要があります。誰かがこれを手伝ってください。

4

4 に答える 4

2

単一の値のみを変更する場合は、省略表記を使用しないでください。または、逆に、省略表記を使用する場合は、「デフォルト」値にしたくないすべての値を指定します。

使用する：

.menu li:hover
{       
    background-color: #3EBBEC; 
}

また：

.menu li:hover
{       
    background: #3EBBEC url(...) ...; 
}

省略形を使用する場合、提供されていないすべての値は、継承された値ではなく、デフォルトにフォールバックすることを覚えておいてください。

于 2012-05-07T11:22:26.827 に答える
1

追加

.menu li:hover 
{ 
background:#3EBBEC url(image.jpg) no-repeat;
color: #FFFFFF; 
}
于 2012-05-09T11:38:09.170 に答える
1 
.menu li {
    background: #color url(path to img);
}
.menu li:hover {
    background: #hover-color url(path to hover-img);
    /* or if only color is changed just write */
    background-color: #hover-color;
}
于 2012-05-07T12:38:14.333 に答える
0

まず、HTMLは次のようになります。

<ul class="menu">
   <li><a href="#">A</a></li>
   <li><a href="#">B</a></li>
   <li><a href="#">C</a></li>
   <li><a href="#">D</a></li>
</ul>

CSS

ul.menu li{display:block; width:100px; height:30px; background:url(yourbackgroundimage.png);}
ul.menu li a{display:block; width:100px; height:30px; background:url(yoursecondbackgroundimage.png);}

ホバー状態を追加したい場合

ul.menu li{display:block; width:100px; height:30px; background:url(yourbackgroundimage.png);}
ul.menu li:hover{background:url(yourhoverbackgroundimage.png);}
ul.menu li a, ul.menu li a:visited{display:block; width:100px; height:30px; background:url(yoursecondbackgroundimage.png);}
ul.menu li a:hover{background:url(yoursecondbackgroundimagehover.png);}
于 2012-05-07T12:27:24.813 に答える