我不擅长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>
所以布局将是
将“状态”和“总计”的背景更改为#4EC772和背景悬停#7DD798,并将两个单词的颜色更改为#FFFFFF
是这样的
我怎么能这样做?
jsfiddle:http://jsfiddle.net/WwY2v/
由于
答案 0 :(得分:1)
只需在所需元素中添加一个类,如:
<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 */
}
答案 1 :(得分:1)
您需要使用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;
}