View Full Version : CSS Remote rollover trouble

07-10-2011, 06:17 AM

I thought I had this figured out, apparently I was wrong.

See page:

What I want to do is have a navigation that when you mouse over the color bars (orange,green,teal,blue) a specific message appears in the word bubble. I've seen a few tutorials that are close to what I'm looking to do, but not exactly. I'm wondering, can this be done? I want to stick with CSS and not get into js. Also can I use sprites and background img positioning instead of single images? If you need any other info from me, please let me know.

Thank you in advance! Any help would be much appreciated!


07-10-2011, 07:27 AM
image sprites would not work here.

I've never tried using :hover, display: none; --> display: block;, if you choose to do this, tell me if it works. I think javascript would be a lot easier though. you're using visibility: hidden; right now, but I think display: none; would be more effective

I would seriously ask you to reconsider javascript, you can find a script for this easily online

07-10-2011, 09:46 AM
using jquery u can do easily.....

let me know if u want to do....

I would like to help u :)

07-10-2011, 07:24 PM
Thanks for the response guys! I guess I should give javascript a try. If you could point me in the direction of a simple(ish) script that I could use to accomplish this, I'd greatly appreciate it!

Thanks again!

07-10-2011, 07:56 PM
<a href='javascript: toggle()'>toggle</a>
<div id='div1' style='display:none'>
Don't display me

function toggle(){
var div1 = document.getElementById('div1')
if (div1.style.display == 'none') {
div1.style.display = 'block'
} else {
div1.style.display = 'none'


more options

07-10-2011, 09:52 PM
I'm having an issue in the code your typed out. I'm really not great with javascript, so I may just be missing something. I just want the word bubble to change when you mouse over (not click) the color bars. I do need body text to appear below the color bars when clicked, but each color bar will show different text. I guess there are a few functions that need to be performed.

This seems quite daunting to my little javascript ignorant mind.

07-10-2011, 09:57 PM
I would suggest taking the next 2 days to learn javascript. It literally takes 2 days :P


but the amount you learn will broaden your skills vastly

-best of luck

07-10-2011, 10:00 PM
Can I do what I want to with javascript? With multiple functions like that?

07-10-2011, 10:07 PM
yep, javascript can do that and MUCH more :)

07-10-2011, 10:29 PM
Ugh. Gives me a headache...

07-10-2011, 11:52 PM
I'm at a dead end.
Though I appreciate the advice of learn javascript, unfortunately at this moment it's not an option. I don't have the time and this was suppose to be small, quick project for someone. I'm not really a web designer, learning javascript at this point would be a waste as I would no doubt forget it after not using it at all for a year. Please, I'll take any guidance I can to help me get out of the woods.

I've updated the page:

Text pops up under the bars, but I can't figure out how to associate a different group of text for each bar. And of course I'm still stumped when it comes to changing the word bubble for each button mouse over.

07-11-2011, 12:12 AM
have you experimented with something like this?

red:hover one{display:block;}
blue:hover two{display:block;}
green:hover three{display:block;}

then somewhere else...

<div id="wordBubble">
<div id="one">this is bubble one</div>
<div id="two">this is bubble two</div>
<div id="three">this is bubble three</div>
<div id="red"></div>
<div id="blue"></div>
<div id="green"></div>

.... you will have to "tidy up" the code and check the syntax's to make the hovers work.... where I agree with Sammy that js is great; I feel his original idea (see posted code in this reply) is a better method for your case... you are only doing "hovers" so making the js function would be more work. I think his first response is the way to go and is what I have attempted to demonstrate "better" for you (so you can see what he was driving at"...
To Sammy; in your initial reply you said you have not done this yet- I do not see any reason why it would not work- and I have done similar to this in the past.
Back to OP, Sammy said in his first reply that you were using visibility:hidden;... please note, that with visibility:hidden the object still occupies the area, whereas display:none; it does not... if you try to cram 4 divs inside that div bubble and use visibility instead of display you will encounter issues

07-11-2011, 02:30 AM
Thank you for trying to help me out!
I tried to follow the code you wrote, but it's not working for me. I fully admit it's probably user error. Here's what I have:

#wordbubble {
background-image: url(images/cmakepeace.png);
width: 720px;
height: 170px;
margin-top: 150px;

#one {

red:hover one {
width: 271px;
height: 143px;
float: right;
margin-top: 11px;
margin-right: 10px;

#buttonbar {
width: 700px;
height: 34px;
margin-top: 10px;

#red {
height: 34px;
display: block;
background: url(images/writing.gif) no-repeat 0 -34px;
float: left;
margin-right: 12px;

and then

<div id="wordbubble">
<div id="one">this is bubble one</div>

<div id="buttonbar">
<div id="red"></div>

I'm hoping it's something simple.
I undated the page here:

I'm trying to set up one button, once I get that I'll follow the same steps for the rest...

07-11-2011, 04:11 AM
i didn't check the syntax's.... you'll need to check that... im pretty sure that my syntax is botched to H and back... i was moreover pointing you to an idea... check w3schools (w3.org if you want better :D) and find the proper form... i think it might actually be
#red:hover #one{restyling code}

07-11-2011, 04:13 AM
Hover isn't supported on some early ie's. just food for thought :) I have used :hover display block before, but I can't remember if it worked or was bug-free since it became obsolete and was pretty long ago.

ARCLite Studio
07-11-2011, 08:24 AM
Ok, Maybe I'm confused since its early morning and I'm tired, but the OP I thought simply needed to change the text that appears in the "text bubble" on mouse hover...

Adding a TITLE tag to a link changes the text in the bubble that shows up on mouse hover.

<div id="buttonbar">
<a id="writing" title="Hover text goes here" href="javascript: toggle()"></a>
<a id="podcasts" href="#"></a>
<a id="contact" href="#"></a>
<a id="twitter" href="#"></a>

So let me know if my tired eyes and brain just missed the whole point here....

07-11-2011, 08:53 AM
So finally, I figured it out. I couldn't manage doing it in CSS but I found an example of exactly what I wanted to do (http://www.daxassist.com/js/disjointedrollovers.cfm) but in javascript. So, that's that.

But I want to use js toggle to show text under the bars instead of having to use something like iframes. I'm having a real problem implementing the toggle without messing up what's already there. Any ideas?

Updated page: http://theindustrialrev.com/cmakepeace/index.html

Thanks to everyone who has tried to help me thus far! I'm going to bed.

07-11-2011, 11:24 AM

I made a sample page for you. Hope this is what you are looking for :)

Follow is the code... You will need jquery file.

Page code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Rollover</title>
<script type="text/javascript" src="jquery-1.js"></script>

<style type="text/css">
* {
h1 {
font:bold 16px Arial, Helvetica, sans-serif;
#rollover {
#links {
margin:5px auto;
#links ul {

#links ul li a{
padding:2px 5px;
font:bold 14px Verdana, Geneva, sans-serif;
<script type="text/javascript">
var pics = new Image()
pics[0] = '1.jpg';
pics[1] = '2.jpg';
pics[2] = '3.jpg';
pics[3] = '4.jpg';
pics[4] = 'default.jpg';

$(document).ready(function() {
$($("#links ul li a")[0]).mouseover(function() {
$("#rollover img").attr("src",pics[0])
$($("#links ul li a")[1]).mouseover(function() {
$("#rollover img").attr("src",pics[1])
$($("#links ul li a")[2]).mouseover(function() {
$("#rollover img").attr("src",pics[2])
$($("#links ul li a")[3]).mouseover(function() {
$("#rollover img").attr("src",pics[3])
$("#links a").mouseout(function() {
$("#rollover img").attr("src",pics[4])


<h1>CSS Rollover</h1>
<div id="rollover"><img src="Default.jpg" title="Image" alt="Image" /></div>
<div id="links">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
Let me know if it is useful for you or not...


07-12-2011, 02:00 AM
Thanks again to all for the info and help. I was able to limp through what I needed to do and got to a place where I'm pretty happy with the semi-finished product.

Thanks guys!