A List Apart: for people who make websites
8 March 2002—Issue No. 140

CSS Rollovers

Code For Your Pleasure

<div class="example">
<img id="topper1" class="topper" src="https://alistapart.com/stories/
rollovers/example1_a_2.gif" 
width="80" height="8" alt="" border="0" 
/><img id="topper2" class="topper" src="https://alistapart.com/stories/rollovers/
example1_b_2.gif" width="80" height="8" alt="" border="0" /><img 
id="topper3" class="topper" 
src="https://alistapart.com/stories/rollovers/example1_c_2.gif" width="80" height="8" alt="" 
border="0" /><br />
<a href="javascript:;" onmouseover=
"document.getElementById('example2a2').style.background='#fcc'; 
document.getElementById('topper1').style.background='black'; 
document.getElementById('endcap1').style.background='gold';" onmouseout=
"document.getElementById('example2a2').style.background='#fff'; 
document.getElementById('topper1').style.background='#ccc'; 
document.getElementById('endcap1').style.background='#ccc';"><img id=
"example2a2" class="ala" style="margin-right: 0; background: #fff;" src="https://alistapart.com/
stories/rollovers/example1_a.gif" width="80" height="20" alt="" border="0" /&
gt;</a><img id="endcap1" class="endcap" src="https://alistapart.com/stories/rollovers/x.gif" 
width="5" height="20" alt="" border="0" /><a href="javascript:;" 
onmouseover="document.getElementById('example2b2').style.background='#fcc'; 
document.getElementById('topper2').style.background='black'; 
document.getElementById('endcap2').style.background='#eee';" onmouseout=
"document.getElementById('example2b2').style.background='#fff'; 
document.getElementById('topper2').style.background='#ccc'; 
document.getElementById('endcap2').style.background='#ccc';"><img id=
"example2b2" class="ala" style="margin-right: 0; background: #fff;" src="https://alistapart.com/
stories/rollovers/example1_b.gif" width="80" height="20" alt="" border="0" /&
gt;</a><img id="endcap2" class="endcap" src="https://alistapart.com/stories/rollovers/x.gif" 
width="5" height="20" alt="" border="0" />
<a href="javascript:;" onmouseover=
"document.getElementById('example2c2').style.background='#fcc'; 
document.getElementById('topper3').style.background='black'; 
document.getElementById('endcap3').style.background='blue';" onmouseout=
"document.getElementById('example2c2').style.background='#fff'; 
document.getElementById('topper3').style.background='#ccc'; 
document.getElementById('endcap3').style.background='#ccc';"><img id=
"example2c2" class="ala" style="margin-right: 0; background: #fff;" src="https://alistapart.com/
stories/rollovers/example1_c.gif" width="80" height="20" alt="" border="0" /&
gt;</a><img id="endcap3" class="endcap" src="https://alistapart.com/stories/rollovers/x.gif" 
width="5" height="20" alt="" border="0" /></div>