469,945 Members | 1,363 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,945 developers. It's quick & easy.

CSS a:hover difficulties

<style type="text/css">
h1.visible {display: block; position: absolute; top: 100px;}
h1.invisible {display: none; position: absolute; top: 100px;}

a.anchor:hover h1.visible {display: none}
a.anchor:hover h1.invisible {display: block}


<a class="anchor">Hover over this to change the wording.
<h1 class="visible">This is a visible heading</h1>
<h1 class="invisible">This is an invisible heading</h1></a>


What I am trying to achieve is similar to what it is doing, except it doesn't feel right to be able to hover over the text itself to change it. I would like it to work so that only if one hovers over "Hover over this to change the wording." that it changes the wording. Any idea how to, without Javascript, accomplish this?
Dec 6 '06 #1
1 2697
Yup, here you go. Works in FFx anyway.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.     <title>Reveal text with CSS only</title>
  4.     <style type="text/css">
  5.         a.hider .normal, a.hider:hover .revealed {
  6.             display:inline;
  7.         }
  8.         a.hider:hover .normal, a.hider .revealed {
  9.             display:none;
  10.         }
  11.     </style>
  12. </head>
  14. <body>
  16. <a href="#" class="hider">
  17.     <span class="normal">Normal text. Hover me.</span>
  18.     <span class="revealed">Bang! Now I have changed!</span>
  19. </a>
  21. </body>
  22. </html>
Dec 8 '06 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

7 posts views Thread by LRW | last post: by
6 posts views Thread by Nikolaos Giannopoulos | last post: by
12 posts views Thread by Sander Tekelenburg | last post: by
15 posts views Thread by Robert Mark Bram | last post: by
2 posts views Thread by skipc | last post: by
24 posts views Thread by fehays | last post: by
7 posts views Thread by Cate Archer | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.