 boognishPremium
join:2001-09-26
Baton Rouge, LA
kudos:6 | jquery and css question I am having a problem figuring out what I need to do to the css to get the home.jpg to change on a hover and select. The other buttons work fine. Also is there a way I can change the font color?
#navMenu {
margin:0;
padding:0;
height:100px;
background:url(../img/menu-bg.gif) repeat-x;
list-style:none;
font:bold 14px "Trebuchet MS";
color:#ffffff;
text-transform:uppercase;
text-align:center;
line-height: 100px;
}
#navMenu ul{
margin:0px;
padding:0px;
height:100px;
list-style:none;
}
#navMenu li a.home {
background:url(../img/home.jpg) no-repeat center center;
height:100px;
width: 152px;
float: left;
}
#navMenu li {
background:url(../img/button.jpg) no-repeat center center;
height:100px;
width: 152px;
float: left;
}
#navMenu li a {
z-index:20;
display: block;
height: 100;
position:relative;
color:#ffffff;
text-decoration: none;
}
#navMenu li .hover {
background:url(../img/button-roll.jpg) no-repeat center center;
position: absolute;
height:100px;
width: 152px;
top:10px;
z-index:0;
display:none;
text-decoration:none;
color:#000000;
}
#navMenu li.selected{
background:url(../img/button-select.jpg) no-repeat center center;
}
$(document).ready(function () {
$('#navMenu li').append('');
$('#navMenu li').hover(
function() {
$(this).children('div').stop(true, true).fadeIn('1000');
},
function() {
$(this).children('div').stop(true, true).fadeOut('1000');
}).click (function () {
$(this).addClass('selected');
});
});
--
don't get 2 close 2 my fantasy |
|
|
|
boognishPremium
join:2001-09-26
Baton Rouge, LA
kudos:6
1 edit | oh and the html
<ul>
<li><a href="#" class="home"></a></li>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
</ul>
--
don't get 2 close 2 my fantasy |
|
| reply to boognish
You have to put your html inside code tags or we can't see them.
To use 'hover' you do 'li:hover' . The way you have it, the browser thinks it's a class name. |
|
boognishPremium
join:2001-09-26
Baton Rouge, LA
kudos:6 | I did put the code tag around the html. If you quote the post you can see the tags are there. I don't think I explained my problem very well. The hover works fine for all the buttons. I tried making the home button it's own class because it is different than the others. I can't figure out how to add the css for it to work on hover.
--
don't get 2 close 2 my fantasy |
|
Reviews:
 ·AT&T Southwest
 ·Charter
3 edits | You're using the wrong code tags. Change them to square brackets.
Change this. You had 'display:none' there:
#navMenu li a.home:hover {
background:url(../img/button-roll.jpg) no-repeat center center;
position: absolute;
height:100px;
width: 152px;
top:10px;
z-index:0;
text-decoration:none;
color:#000000;
}
|
|
boognishPremium
join:2001-09-26
Baton Rouge, LA
kudos:6 | reply to boognish
I think I can get what I want by putting the home and other buttons in different UL, but I feel there has to be a better way.
--
don't get 2 close 2 my fantasy |
|
| I edited my post |
|
boognishPremium
join:2001-09-26
Baton Rouge, LA
kudos:6 | Your suggestion didn't work. It causes that button to freak out in IE and firefox. »ilostabet.net/test/ Button one, two, three, and four work how I want on a hover using my original code. I want the blue button to do that also. Right now I have your suggested change that cause it to flash really fast. I had the display none there for the javascript.
--
don't get 2 close 2 my fantasy |
|
| I was just looking at the CSS hover part. I don't know if your javascript is messing with this. Haven't had a chance to look. |
|
