Jeg ønsker hover på teksten!
Hej,jeg er ved at lave en DHTML-dropdown.
Det virker som sådan også fint nok!
Hvis jeg holder musen over de menu-punkter som er i dropdown-menuen, så skifter teksten, men holder jeg den ved siden af teksten, så er der border på, men teksten ændrer sig ikke!
Kan nogen hjælpe her?
Her er koden ihf:
<html>
<head>
<title>Javascript Leg...</title>
<style type="text/css">
*{
font-family: verdana;
font-size: 11px;
}
a.dropDown:link
{
color: black;
text-decoration: none;
} /* unvisited link */
a.dropDown:visited
{
color: black;
text-decoration: none;
} /* visited link */
a.dropDown:hover
{
color: dimgray;
text-decoration: none;
} /* mouse over link */
a.dropDown:active
{
color: dimgray;
text-decoration: none;
} /* selected link */
div#dropDownButton
{
border: 1px solid black;
background-image: url(select.gif);
background-repeat: no-repeat;
background-position: 70px 0px;
overflow:hidden;
position:absolute;
left:100px;
top:100;
background-color:lightgrey;
width:85px;
height:15px;
}
div#dropDownLayer
{
visibility:hidden;
position:absolute;
background-color:lightgrey;
z-index:5;
}
td.over
{
background-color: gainsboro;
border: 1px solid black;
}
td.out
{
background-color: lightgrey;
border: 1px solid lightgrey;
}
</style>
<script type="text/javascript">
var id = 0;
function showDropDown(parent,elm)
{
var xE=document.getElementById(elm);
xP = posX(parent);
yP = posY(parent);
hP = parent.offsetHeight
wP = parent.offsetWidth;
xE.style.left = xP;
xE.style.top = yP + hP;
xE.style.width = wP;
xE.style.visibility='visible';
}
function stopDelay()
{
clearTimeout(id);
}
function delayHideDropDown(elm)
{
id = setTimeout("hideDropDown('"+elm+"')",100);
}
function hideDropDown(elm)
{
var xE=document.getElementById(elm);
xE.style.visibility='hidden';
}
function posX(obj)
{
return(obj.offsetParent==null ? obj.offsetLeft : obj.offsetLeft+posX(obj.offsetParent));
}
function posY(obj)
{
return( obj.offsetParent==null ? obj.offsetTop : obj.offsetTop+posY(obj.offsetParent));
}
function HLRow(objTD)
{
objTD.className = "over";
}
function ULRow(objTD)
{
objTD.className = "out";
}
</script>
</head>
<body>
<div id="dropDownButton" onclick="showDropDown(this,'dropDownLayer');" onmouseover="stopDelay();" onmouseout="delayHideDropDown('dropDownLayer');">Dropdown</div>
<div id="dropDownLayer" onmouseover="stopDelay();" onmouseout="delayHideDropDown('dropDownLayer');">
<table width="100%" cellspacing=0 cellpadding=0>
<tr><td class="out" onMouseOver="HLRow(this);" onMouseOut="ULRow(this);"><a class="dropDown" href="#">Dropdown1</a></td></tr>
<tr><td class="out" onMouseOver="HLRow(this);" onMouseOut="ULRow(this);"><a class="dropDown" href="#">Dropdown2</a></td></tr>
<tr><td class="out" onMouseOver="HLRow(this);" onMouseOut="ULRow(this);"><a class="dropDown" href="#">Dropdown3</a></td></tr>
<tr><td class="out" onMouseOver="HLRow(this);" onMouseOut="ULRow(this);"><a class="dropDown" href="#">Dropdown4</a></td></tr>
<tr><td class="out" onMouseOver="HLRow(this);" onMouseOut="ULRow(this);"><a class="dropDown" href="#">Dropdown5</a></td></tr>
<tr><td class="out" onMouseOver="HLRow(this);" onMouseOut="ULRow(this);"><a class="dropDown" href="#">Dropdown6</a></td></tr>
<tr><td class="out" onMouseOver="HLRow(this);" onMouseOut="ULRow(this);"><a class="dropDown" href="#">Dropdown7</a></td></tr>
<tr><td class="out" onMouseOver="HLRow(this);" onMouseOut="ULRow(this);"><a class="dropDown" href="#">Dropdown8</a></td></tr>
<tr><td class="out" onMouseOver="HLRow(this);" onMouseOut="ULRow(this);"><a class="dropDown" href="#">Dropdown10</a></td></tr>
<tr><td class="out" onMouseOver="HLRow(this);" onMouseOut="ULRow(this);"><a class="dropDown" href="#">Dropdown11</a></td></tr>
<tr><td class="out" onMouseOver="HLRow(this);" onMouseOut="ULRow(this);"><a class="dropDown" href="#">Dropdown12</a></td></tr>
<tr><td class="out" onMouseOver="HLRow(this);" onMouseOut="ULRow(this);"><a class="dropDown" href="#">Dropdown13</a></td></tr>
</table>
</div>
</body>
</html>
