Jump to content

.cell_over / .cell_out


fluffy-sama

Recommended Posts

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! :)

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.