html - Change css background for my code -
i'm not in css, please try me
i have css code
#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; } and html code
<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> so layout be

change background "status" , "total" #4ec772 , background hover #7dd798 , color both words #ffffff
to this

how can please ?
jsfiddle: http://jsfiddle.net/wwy2v/
thanks
you need use nth-child() pseudo class target 2 <li> , same color: #fff; except specify <strong> element after ..
updated fiddle: http://jsfiddle.net/wwy2v/2/
this added:
#mo-stats-r2 li:nth-child(4n + 1):hover { background: #4ec772; } #mo-stats-r2 li:nth-child(4n + 1) strong:hover { color: white; }
Comments
Post a Comment