Forum Moderators: not2easy

Message Too Old, No Replies

IE and link hover text box

         

breezeman

11:21 pm on Dec 7, 2005 (gmt 0)

10+ Year Member



I want a textbox when hovering over a link, kind of like the title tag.

I have this code and works fine in firefox but nothing happens with IE.

style.css


#container {
width: 250px;
font-size:12px;
font-family:Geneva, Arial, Helvetica, sans-serif;
background-color:#FFFFCC;
}
#container a {
color: #000;
text-decoration: none;
}
#container a .box {
display: none;
}
#container a:hover .box {
display: block;
width: 200px;
border: 1px #000;
position: absolute;
background-color:#CCCCCC;
padding-left: 15px;
padding-bottom: 15px;
padding-right: 15px;
padding-top: 15px;
margin-left:100px;
text-decoration:none
}

And the html


<div id="container"> <a href="go.php">link text
<span class="box">
Here the text for the hover box</span></a></div>

Any idea how to get this working in IE as well?

Fotiman

12:19 am on Dec 8, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm not sure why exactly, but it seems you need to have a background style on the a:hover in order for your text to show up. For example, add this:


#container a:hover {
background: #aaa;
}

And it will work.

breezeman

12:26 am on Dec 8, 2005 (gmt 0)

10+ Year Member



Thanks a lot for your response, I added that and all it did in ie was give the link another background color when hovering over it.

Also tried to add all the content in #container a:hover .box to #container a:hover and then it works on the first link and going to the next link IE hangs (looks like a loop it cant get out or something).