.cell_over / .cell_out

[fluffy-sama]

Hi, I'm looking for help, and I do hope that my inquiry has found its way to the correct board.

 

In the <style> tag at the head of my document, I'm using this little bit of code to make buttons that will change color when moused over:

 

 

.cell_over { BACKGROUND-COLOR: #000046 }

.cell_out { BACKGROUND-COLOR: #00005c }

.cell_over1 { BACKGROUND-COLOR: #000046) }

.cell_out1 { BACKGROUND-COLOR: #00005c }

 

 

However, I've decided that I don't want the color to simply change. Rather, I would like for the cell to be transparent to begin with, and display an image when moused over that will disappear when the mouse is moved off.

 

Could someone assist me with this? I'd appreciate it ever so much!

[fluffy-sama]

Just wondering, not getting any replies ummm... because the question is in the wrong place? I'd really appreciate some help.

[Mr_jmm]

It's the right forum.

 

Perhaps I'm not the only one than hates it when people start with the "Why won't anybody help me" B.S., especially after just 36 minutes!!

 

Manners don't cost anything.

[dbrimlow]

Actually, I thought fluffy-sama was quite humble.

 

The reason you aren't getting any response, however, is because you have not really explained what you want to do properly.

 

Is this called via jscript:

.cell_over { BACKGROUND-COLOR: #000046 }

.cell_out { BACKGROUND-COLOR: #00005c }

.cell_over1 { BACKGROUND-COLOR: #000046) }

.cell_out1 { BACKGROUND-COLOR: #00005c }

 

Are you using the a:hover pseudo-element to make the effect work?

 

Show us a sample or give us a link to a test page, or at least copy and paste your code) use the tag

before and after any html or css sample code.

 

There is a way to use transparent along with a background image.

 

But I think you should start with the one place most of us started ... the Master, "maxdesign":

 

List-o-matic

 

Listomatic is all about using lists for menus, and hover effects via css.

 

[bronzemonkey]

I would like for the cell to be transparent to begin with, and display an image when moused over that will disappear when the mouse is moved off.

 

You use the :hover pseudo-class, but in IE6 this is only supported on anchors. All other modern browsers will support it on a variety of elements

 

/*using it on an anchor (often a link). Will work in all browsers*/
.cell a {background:transparent;}
.cell a:hover {background:url(image-path) 0 0 no-repeat;}

/*using it on a different element. Will not work in IE6*/
.cell {background:transparent;}
.cell:hover {background:url(image-path) 0 0 no-repeat;}

 

But read the tutorials on list-o-matic so that you know something about css before you get started.