Hover Text Swap

ConcreteWaves

04-05-2012, 10:19 AM

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.

<footer id="footer">
<span><a href="#">Back to top</a></span> 
<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> © 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.

coothead

04-05-2012, 10:39 AM

Hi there ConcreteWaves,

does this basic example help...
<!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

abduraooft

04-05-2012, 10:41 AM

<li class="forums"><a href="#"><span class="forums">Forums</span><span class="soon">Coming Soon</span></a></li>
nav li.forums span.soon{
display:none;
}
nav li.forums:hover span.soon{
display:inline;
}
nav li.forums:hover span.forum{
display:none;
}

ConcreteWaves

04-05-2012, 07:15 PM

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.