text visible using css

I'm trying to create a webpage where each button when it is rolled over reveals different text on the front page. I used to use Image ready to do this but I'd like to use css. There can be copy on the front page but when a button is rolled over, I want the copy to change to relavant copy.
designaireAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Jason C. LevineConnect With a Mentor No oneCommented:
Actually, I take it back.  You can do disjointed rollovers with just CSS:

http://alt-web.com/DEMOS/CSS-Disjointed-Text-Rollover.shtml
0
 
Jason C. LevineNo oneCommented:
Hi designaire,

Are you trying to have a tooltip type of effect or do you want one region to change based on mouseover in another region?

In either case, CSS alone won't really do this.  You will need javascript to make it work.
0
 
designaireAuthor Commented:
Can you direct me to example javascript code?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
remorinaConnect With a Mentor Commented:
Hi designaire,

You can also use the example below to show a div which can contain any amount of elements when hovering onto a list buttons



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
    body {margin:10px;}
    #wrapper {width:1000px;background:#f2f2f2;margin:0 auto;}
    #leftColumn {float:left;width:100px;}
    ul {margin:0;padding:0;position:relative;overflow:visible;}
    ul li {list-style:none;margin:0;padding:0;}
    ul li a.button:link, ul li a.button:visited {width:63px;height:15px;display:block;text-decoration:none;margin-bottom:10px;}
    ul li.red a.button {background:red url(http://www.golden-orb.com/images/button_range.jpg) no-repeat -229px -4px;}
    ul li.green a.button {background:green url(http://www.golden-orb.com/images/button_range.jpg) no-repeat -229px -60px;}
    ul li.grey a.button{background:gray url(http://www.golden-orb.com/images/button_range.jpg) no-repeat -229px -32px;}
    ul li div {position:absolute;border:solid 1px #333;width:200px;left:150px;top:0;display:none;}
    ul li:hover div {display:block;}
    
</style>
<script type="text/javascript">
    
</script>

</head>
<body>
    <div id="wrapper">
        <div id="leftColumn">
            <ul>
                <li class="green">
                    <a href="#" class="button">&#160;</a>
                    <div>
                        <h2>Example 1</h2>
                        <p>Content EXample here</p>
                    </div>
                </li>
                <li class="red">
                    <a href="#" class="button">&#160;</a>
                    <div>
                        <h2>Example 2</h2>
                        <p>Content EXample here</p>
                    </div>
                </li>
                <li class="grey">
                    <a href="#" class="button">&#160;</a>
                    <div>
                        <h2>Example 3</h2>
                        <p>Content EXample here</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Open in new window

0
 
designaireAuthor Commented:
Thanks I like both suggestions. I just realized however that I need it to replace type that already exists. I have a feeling this can't be done.. (I will give credit for what you posted) Maybe with javascipt. I used to do it with imageready but it's type not graphics...thanks.
0
 
designaireAuthor Commented:
I wanted to split the points between the 2
0
 
designaireAuthor Commented:
One of these should work, thanks...
0
All Courses

From novice to tech pro — start learning today.