Forum Moderators: not2easy
Is it possible to have a background rollover with only CSS?
I currently use the ":hover" on a style for IE but offcourse mozilla/firefox does not support it
ive tried using the #stylename ..
<table id..
for mozilla/firefox
but that only seems to work with BG color only
but i need the background image to change too
If you have any suggestions please post in, if css is not able to do that but Javascript can then i wouldnt really mind as long as it worked how i wanted it to.
If its still too hard to understand ill make it more detailed.
I currently use the ":hover" on a style for IE but offcourse mozilla/firefox does not support it
Actually it's the other way around. Mozilla supports ":hover", IE only supports it for links ("a:hover"). I don't see why it shouldn't work with images.
Post your CSS code and let's have a look at what you're trying to do.
<!-----IE------>
.navbutton {
background-attachment: fixed;
background-image: url(../images/nav_button.gif);
background-repeat: no-repeat;
background-position: center top;}
.navbuttonover {background-attachment: fixed;
background-image: url(../images/nav_button_over.gif);
background-repeat: no-repeat;
background-position: center top;}
.navbuttonsmall {background-attachment: fixed;
background-image: url(../images/nav_button_small.gif);
background-repeat: no-repeat;
background-position: center ;
}
.navbuttonsmallover {background-attachment: fixed;
background-image: url(../images/nav_button_small_over.gif);
background-repeat: no-repeat;
background-position: center top;}
<!-----IE ENDS------><!-----mozila---->
#navbutton {
background-attachment: fixed;
background-image: url(../images/nav_button.gif);
background-repeat: no-repeat;
background-position: center top;}
#navbuttonover:hover {background-attachment: fixed;
background-image: url(../images/nav_button_over.gif);
background-repeat: no-repeat;
background-position: center top;}
#navbuttonsmall {background-attachment: fixed;
background-image: url(../images/nav_button_small.gif);
background-repeat: no-repeat;
background-position: center ;
}
#navbuttonsmallover:hover {background-attachment: fixed;
background-image: url(../images/nav_button_small_over.gif);
background-repeat: no-repeat;
background-position: center top;}
<!------mozila ends----><!-----IE------>
.navbutton {
background-attachment: fixed;
background-image: url(../images/nav_button.gif);
background-repeat: no-repeat;
background-position: center top;}
.navbuttonover {background-attachment: fixed;
background-image: url(../images/nav_button_over.gif);
background-repeat: no-repeat;
background-position: center top;}
.navbuttonsmall {background-attachment: fixed;
background-image: url(../images/nav_button_small.gif);
background-repeat: no-repeat;
background-position: center ;
}
.navbuttonsmallover {background-attachment: fixed;
background-image: url(../images/nav_button_small_over.gif);
background-repeat: no-repeat;
background-position: center top;}
<!-----IE ENDS------><!-----mozila---->
#navbutton {
background-attachment: fixed;
background-image: url(../images/nav_button.gif);
background-repeat: no-repeat;
background-position: center top;}
#navbuttonover:hover {background-attachment: fixed;
background-image: url(../images/nav_button_over.gif);
background-repeat: no-repeat;
background-position: center top;}
#navbuttonsmall {background-attachment: fixed;
background-image: url(../images/nav_button_small.gif);
background-repeat: no-repeat;
background-position: center ;
}
#navbuttonsmallover:hover {background-attachment: fixed;
background-image: url(../images/nav_button_small_over.gif);
background-repeat: no-repeat;
background-position: center top;}
<!------mozila ends---->
and this is what im using on my page:
This code works fine with IE too but with mozila it different
<td width="15%" bgcolor="#FFFFFF" class="navbuttonsmall" onmouseover="this.className='navbuttonsmallover'; this.style.cursor='hand';" onmouseout="this.className='navbuttonsmall'" onclick="window.location.href='../Link/'"><a href="../link">linka></td>
Im confused with the mozilla codes tho.. any suggestions that..
In general, it's wisest to code (ESPECIALLY trickier things!) so that your pages display properly in Mozilla et al, and THEN tweak for IE. IE is the renegade....
I was an IE user for many years, until various posts herein showed me the light. You can download the other browsers free and use them to view your pages. You can search for relevant posts here using the following: * site:www.webmasterworld.com, where "*" represents the keyword to search on
Best of luck to you!
Secondly, I'm not sure what you're trying to do with your CSS. What's all the "IE" and "Mozilla" doing in the CSS. How is the browser supposed to know which classes to apply? In reality, CSS always applies the last class defined.
As vkaryl says, test in Mozilla until the CSS works, then try the page out in IE. At this point, make any tweaks necessary to get the page to work in IE. Think of doing this this way around as being like scrambling an egg. Fairly straightforward if you know a few simple rules. Testing in IE then makijg tweaks so that other browsers display the page properly is, in the other hand, like unscrambling an egg.
My other reaction to what you've done is that it's overcomplicated and repetitive. Define each of your classes, then, for the :hover pseudo-class, only define things that change. CSS takes everything else from what has been previously defined. That's the "cascading" part of Cascading Style Sheets.
So, for example:
.navbutton {
background-attachment: fixed;
background-image: url(../images/nav_button.gif);
background-repeat: no-repeat;
background-position: center top;
}
.navbuttonover {
background-image: url(../images/nav_button_over.gif);
}
should give you what you want for these two classes. It will ceratinly give you the same as what you've written, with a lot less code. You don't need to repeat the attachment, repeat and position rules, since they are the same.
Get the page working in Mozilla first. You can worry about IE later. As I said, you'll find it easier that way.
