Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Hover Text Swap

  1. #1
    New Coder
    Join Date
    Mar 2012
    Location
    Aurora, CO & Clifton, NJ
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Cool Hover Text Swap

    Hi, I have a <ul> <li> setup at the bottom of my page in small text that says, Directions Forums Informations Blah Blah all hyperlinks within the same ul. All the text is how I want it to look and they all have a hover to go bold and greenish when you mouseover. However - one specific <li> the Forums...when you mouse over I simply want the 10px text to say Coming Soon. That's all.

    Sounds so easy, but I can't seem to find anything on it. Except some old school codes from 5 or 6 years ago and I know a lot has changed since then there's probably an easier way to do it.

    Code:
     	<footer id="footer">
    			<span><a href="#">Back to top</a></span> <!-- capitalize using text-transform (css) -->
    			<nav id="footer_nav">
    				<ul>
    					<li><a href="#">Directions</a></li>
    					<li><a href="#">Forums</a></li>
    					<li><a href="#">Follow on facebook</a></li>
    					<li><a href="#">Contact</a></li>
    				</ul>
    			</nav>
                	<span2> &copy; 2006 Tamzen Karma, Awakenings Aromatherapy Massage. All Rights Reserved. Licensed in Colorado.</span2> 
    		</footer>
    the <li> Forums. I want to rollover to Coming Soon...what is the code to do so and how do I set it up so only that single word changes to coming soon, i'm afraid even if I figure out the code, all of my list will roll over to say Coming Soon.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there ConcreteWaves,

    does this basic example help...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    ul a:hover{
       font-weight:bold;
       color:#008000;
     }
    #hide {
        display:none;
     }
    #forums:hover #show {
        display:none;
     }
    #forums:hover #hide {
        display:inline;
     }
    </style>
    
    
    </head>
    <body>
    
    <ul>
     <li><a href="#">Directions</a></li>
     <li><a id="forums" href="#"><span id="show">Forums</span><span id="hide">Coming soon</span></a></li>
     <li><a href="#">Follow on facebook</a></li>
     <li><a href="#">Contact</a></li>
    </ul>
    
    </body>
    </html>
    
    coothead

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    <li class="forums"><a href="#"><span class="forums">Forums</span><span class="soon">Coming Soon</span></a></li>
    Code:
    nav li.forums span.soon{
    display:none;
    }
    nav li.forums:hover span.soon{
    display:inline;
    }
    nav li.forums:hover span.forum{
    display:none;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Mar 2012
    Location
    Aurora, CO & Clifton, NJ
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I appreciate the help. Abduraooft it worked , I entered your code. - however - before hover it says FORUMS after your coding , hover, it says FORUMSCOMINGSOON.

    I mean...people will get the point. But I don't want them thinking it's sloppy coding.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •