更改CSS背景为我的代码

我有这样的CSS代码

#mo-stats-w1 { 
    background: url("http://i48.tinypic.com/108dbix.png") 0px 0px repeat-x; 
    /*height: 143px;*/ 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    margin: 10px 0px 0px 0px; 
    padding-bottom: 10px; 
    background-color: #3EC4CD; 
} 
#mo-stats-w2 { 
    padding: 12px 0px 0px 15px; 
} 

#mo-stats-w1 ul { 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 1px 0px; 
    height: 59px; 
} 
#mo-stats-w1 ul li { 
    display: block; 
    list-style: none; 
    padding: 1px;/*0px 0px 0px 0px;*/ 
    margin: 0px 1px 0px 0px; 
    width: 174px; 
    height: 59px; 
    float: left; 
} 
ul#mo-stats-r1 li { background: url("http://i50.tinypic.com/23j0bcg.png") 0px 0px no-repeat; } 
ul#mo-stats-r2 li { background: url("http://i50.tinypic.com/23j0bcg.png") 0px -59px no-repeat; } 

#mo-stats-w1 ul li strong { 
    font-size: 24px; 
    height: 22px; 
    font-family: Arial, "Nimbus Sans L", "FreeSans"; 
    font-weight: bold; 
    color: #1774C2; 
    text-shadow: 1px 1px 1px white; 
    display: block; 
    padding: 0px 0px 0px 0px; 
    margin: 10px 0px 0px 11px; 
} 


#mo-stats-w1 ul li span { 
    font-size: 13px; 
    font-weight: bold; 
    color: #3e3e3e; 
    display: block; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 11px; 
}

这HTML代码

<div id="mo-stats-w1"> 

     <div id="mo-stats-w2"> 

      <ul id="mo-stats-r2"> 

       <li><strong>Status</strong></li> 
       <li><strong>100</strong> <span>Points</span></li> 
       <li><strong>30</strong> <span>Pending Points</span></li> 
       <li><strong>0</strong> <span>Direct Referrals</span></li> 

       <li><strong>Total</strong></li> 
        <li><strong>2</strong> <span>Links</span></li> 
        <li><strong>114</strong> <span>Views</span></li> 
        <li><strong>7</strong> <span>Unlocked Views</span></li> 



      </ul> 
     </div> 

    </div>

所以布局将是

enter image description here

更改为“状态”和“总”，以＃4EC772和背景悬停＃7DD798和两个词的颜色背景是#FFFFFF

要像这样

enter image description here

如何我可以那样做吗？

的jsfiddle：http://jsfiddle.net/WwY2v/

感谢

来源

2013-03-01 user2005646

添加类状态和总'li'” s或使用'li：nth-child（4n + 1）{background：＃4EC772;}' – Morpheus 2013-03-01 16:50:42

您可以为Status或Total LI字段添加某种标识符吗？如类也许这样你可以修改类的样式？否则，状态和总是总是那么多列表元素的一部分？ – user829323 2013-03-01 16:52:38

您需要使用伪类nth-child()将这两个目标定为<li>并做了color: #fff;除了指定后<strong>元素相同..

更新小提琴：http://jsfiddle.net/WwY2v/2/

这是我加：

#mo-stats-r2 li:nth-child(4n + 1):hover { 
    background: #4EC772; 
} 

#mo-stats-r2 li:nth-child(4n + 1) strong:hover { 
    color: white; 
}

来源

2013-03-01 16:57:35 Adrift

你可以包括我的评论作为答案;） – Morpheus 2013-03-01 17:00:10

@Morpheus完美的黑暗谢谢你的工作:)是否有另一种可能的解决方案，而不是nth-child ..我可以处理它..但我不认为我的客户可以做 – user2005646 2013-03-01 17:24:48

@PerfectDark，好的谢谢:) – user2005646 2013-03-01 17:32:17

只需添加一个类，如必需的元素：

<li class='highlight'><strong>Status</strong></li> 
... 
... 
<li class='highlight'><strong>Total</strong></li>

，并使用下面的CSS：

.highlight { 
    color:#FFFFFF; /* normal text color */ 
    background-color:#4EC772; /* normal bg color */ 
} 
.highlight:hover, .highlight:focus { 
    color:#FFFFFF; /* hover text color */ 
    background-color:#7DD798; /* hover bg color */ 
}

来源

2013-03-01 16:56:48

基本上，这应该工作..我已经尝试过，但它不 – user2005646 2013-03-01 17:19:10

谢谢:)我会再试一次。 – user2005646 2013-03-01 17:26:19

更改CSS背景为我的代码

回答

相关问题