onmouseover event

**jmu2101** · 10-17-2011 04:40 PM

Why does this code not produce a dropdown list when onmouseover happens?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

<head>
<style type="text/css">

div.dg
{

border:2px solid white;
display:none;
}

a
{
width: 100px;
text-align:center;
background-color:red;
color:white;
font-size:16px;
display:block;

}

</style>

</head>

<body>

<div>
<a id="kj" href="kkjklj.com" onmouseover="this.parentNode.childNodes[1].style.display='inline';"
onmouseout="this.parentNode.childNodes[1].style.display='none';">kjlj</a>
<div class="dg">
<a href="kjlj.com">lkjefee</a>
<a href="ehfueh.com">fheufheuih</a>
</div>
</div>

</body>
</html>

**Kor** · 10-18-2011 02:02 AM

1. childNodes[] is inconsistent among browsers. Some browsers, like Mozilla, count all the possible text nodes (the "gaps" between the tags) as childNodes, others, like IE, count only some of them or none. As a result childNodes[1] might designate different elements, according to the browser. Use getElementsByTagName() instead.

2. A DIV element is a block level element, thus it can not have the display inline. You should use the value: block

Is this what you want?

Code:

<div>
<a id="kj" href="kkjklj.com" onmouseover="this.parentNode.getElementsByTagName('div')[0].style.display='block';"
onmouseout="this.parentNode.getElementsByTagName('div')[0].style.display='none';">kjlj</a>
<div class="dg">
<a href="kjlj.com">lkjefee</a>
<a href="ehfueh.com">fheufheuih</a>
</div>
</div>

**jmu2101** · 10-18-2011 12:46 PM

i didn't know that, thank you very much. Yes that is the code i was trying to write!

Thread: onmouseover event

Thread Tools

Display

onmouseover event

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions