üzerine gelince renk değiştiren <li class=> ?

[pckedisi]

üzerine gelince <li class="mission"><li class="more"> kutuların renk değiştimesini istiyorum ama li lerde yapamadım ve anlamayamadım..birde linkleri yukardan aşağıya ortalanabilirmi.

<style type="text/css">
ul#intro,ul#intro li{list-style-type:none;margin:0;padding:0;font-size: 90%;}
ul#intro{width:100%;overflow:hidden;margin-bottom:10px}
ul#intro li{float:left;width:310px;margin-right:10px;margin-top:5px; padding: 1px 0 }
li.mission{background: #F5DEB3;}
ul#intro li.more{margin-right:0;background: #FF6347;}
ul#intro p{margin:0;padding:5px 0px 0;  height:70px;  text-align: center; }
ul#intro h3{padding-bottom:3px;color: #FFF; margin:0 0 0;padding: 0px 10px 0; float: left;}

</style>
<ul id="intro">
<li class="mission"><h3><img src="xxx" width="70" height="70" alt="xxxxx"></h3><p><a href="#">1.sıra[/url]</p></li>
<li class="more"><h3><img src="xxx" width="70" height="70" alt="xxxxx"></h3><p><a href="#">2.sıra[/url]</p></li>
</ul>

[BotanGuner]

Selam,

İlk önce LI nin resmini değiştirmek istiyorsan <img> tagi yerine css'nin list-style-image ve list-style-position özelliklerini kullanırsan rahat olur. Kutuların renk değiştirmesi ile neyi kastetdiğini anlayamadım ama ufak bir javascript ile onu da halledebilirsin.

Kod:

function degistir(el) {
  el.style.backgroundColor = (el.style.backgroundColor=="#000000")?"#0033666":"#000000";
}
...
<li onMouseOver="degistir(this)" onMouseOut="degistir(this)">...</li>

[tekinonline]

ne gerek var javascript koduna. internet explorer 6 için js gerek yok zaten miyadı doldu ie6' nın.

Kod:

ul#intro li.more:hover {
..
..
}

ff ve ie7' de çalışacaktır.