Display div only whilst mouse is over another div

admin · Jan 11, 2008

Hi,

I'm trying to get a div visible only when the mouse is over another div, but it doesn't seem to work. Here is my code:

<style type="text/css">
a.amenu1{
background-color:blue;
}
a.amenu1:link {color: #FF0000}
a.amenu1:visited {color: #00FF00}
div.menu1a1{
a:hover{
display: inline;
}
}

</style>
</head>

<body>

<div class="menu1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"www.bbc.co.uk" class="amenu1">You</a></div>
<div class="menu1a1" style="display: none">Hello</div></p>

Thanks in advance,

Neilwww.vladdy.net/demos/suppinfopopup.htmlVladdy,

You got me there; i was thinking: "WHAAAT?!! IE5.5 supports :hover on list-items?!!"

.
And then I noticed the behaviour file...

that was the simplest and least intrusive way to "educate" the stoopid thing I could come up with

Thanks for that. Is there any way I can incorperate the (relevant part of the) iefixes file into the main code?

Thanks,

NeilAll parts of the iefixes.htc are relevant.
Just copy the file to your web site and link to it from CSS as shown.Thanks, that works. I see though hat the IEFixes file uses JScript. Would this mean if the user disabled javascript it wouldn't work?

Thanks again,

NeilOn IE - yes.Is there any way I can do this without Javascript? And why does the file end in .htc, not .js?

Thanks,

Neilthe extension is htc because the scripting uses IE's behaviors to attach events.
IE is too dumb to make it working without scripting.Ok then. Is there a way I can make the list items DIVs instead?

Thanks again,

NeilSure, change the html and css as needed. The appropriate tag depends on the information your are trying to present. Styling is flexible.Thanks, here is my code now:

<style type="text/css">
li
{ behavior: url('IEFixes.htc');
}

body
{ font-family: Arial, sans-serif;
}

li div.theitems
{ position: absolute;
top: 10px;
left: 110px;
display: none;
border: solid #000 1px;
background: #fff;
margin: 0.5em 0px 0px -2ex;
}

li>div.theitems
{ margin: -0.5em 0px 0px 2ex;
}

li:hover div.theitems, li.hover div.theitems
{ display: block;
}
a{cursor

ointer}
</style>
</head>

<body>
<ul>
<li>TV Channels <div class="theitems">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.bbc.co.uk">BBC</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.itv.co.uk">ITV</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.five.tv">Channel 5</a></div></li>
<li>Search Engines<div class="theitems">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.yahoo.co.uk">Yahoo</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.co.uk">Google</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.lycos.com">Lycos</a></div>
</li>

</ul>
</body>

In the CSS code, I have tried changing all the 'li's to 'div.menu1's, and in the body all the <li>s to <div class="menu1">s and </li> to </div>s but it doesn't seem to work. Do you know why?

Thanks,

NeilDon't forget to change what htc is applied to.
Also you should not be using div there to begin with.
This example is more along the lines of what you need to do:
<a class="postlink" href="http://www.vladdy.net/Demos/CSSnav.html">www.vladdy.net/Demos/CSSnav.html</a>

Display div only whilst mouse is over another div

admin

Administrator