By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,952 Members | 1,722 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,952 IT Pros & Developers. It's quick & easy.

Problem with CSS Mouseover

P: n/a
Hello,

I want to design a mouseover text using the following example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box a {
color:#ffffff;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
width:150px;
padding:5px;
border:1px solid black;}

#box a:hover {
color:black;
background:#ddd8b7;}

#box a span {display:none;}

#box a:hover span {
position:absolute; top:10px; right:10px; z-index:3;
display:block;
width:300px;
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
padding:10px;}
-->
</style>
</head>
<body>

<div id="box"><a href="#">INFOBOX<span>Lorem ipsum dolor sit
amet.</span></a></div>

</body>
</html>

As you see the text in the span-tag is hidden (display:none) until the
mouseover (hover) effect is called.

This works fine, also in IE.
My problem is now, that if I am using a <a>-tag in the <span>-tag,
everything after the <a>-tag is _NOT_ hidden with display:none.

A simple example using the same css-definitions would be:

<div id="box"><a href="#">INFOBOX<span>Lorem ipsum <a
href="something">dolor</asit amet.</span></a></div>
I think it is because I cannot use a <a>-tag inside an <a>-tag.

So do you know any other solutions to solve this problem?

Regards,

Martin
Sep 24 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Martin Pöpping wrote:
I want to design a mouseover text using the following example:
You should have posted the URL, and you should have considered whether you
really have an HTML problem or something else.
<div id="box"><a href="#">INFOBOX<span>Lorem ipsum dolor sit
amet.</span></a></div>
- -
As you see the text in the span-tag is hidden (display:none) until the
mouseover (hover) effect is called.
You forgot the usual CSS caveats. When CSS is off - e.g., when a search
engine robot analyzes you document, the content is
INFOBOXLorem ipsum dolor sit amet.
(without a space after the "X").
This works fine, also in IE.
For some values of "works". By the way, when the user clicks on the link
text, he jumps to the start of the document. This doesn't match my value for
"works".
My problem is now, that if I am using a <a>-tag in the <span>-tag,
everything after the <a>-tag is _NOT_ hidden with display:none.
That would be invalid markup, so why would you use it?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Sep 24 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.