onmouseOver skal gælde hele div'en

Jeg anvender følgende:

<style>
.overbutton {
border: 1px solid #000080;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFF2C8,endColorStr=#FFD294);
float: left;
cursor: default;
}

.downbutton{
border: 1px solid #000080;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FE9552,endColorStr=#FFD38E);
float: left;
cursor: default;
}

.dhtmlbutton {
border: 1px solid #000080;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#DEDFE0,endColorStr=#BFC0C0);
float: left;
cursor: default;
}
</style>

<script>
function upeffect(cur){
cur.className='overbutton'
}
function downeffect(cur){
cur.className='downbutton'
}
function normaleffect(cur){
cur.className='dhtmlbutton'
}
</script>

<div class=dhtmlbutton onMouseup="upeffect(this)" onMousedown="downeffect(this)" onMouseover="upeffect(this)" onMouseout="normaleffect(this)">Tekst</div>

OnMouseOver-effekten træder kun i kraft, når jeg bevæger musen hen over TEKSTEN, ikke når musen blot er over div-området. Det er ikke hensigtsmæssigt.
Kan det løses, så jeg kan angive en width på div - og onmouseover træder i kraft, når musen er over div'en?