Forums

JohnMotylJr

My goal is when someone hovers over the id of "btnHome" the body background color will change to the same color as "btnHome"

html:


<script>
$('#btnHome').mouseover(funtion() {
	$('body').css('background' , '#1E90FF');
})
</script>
</head>

<body>
     <div id="btnHome" class="nav-button">home</div>
</body>

css:


body {
	background:#696969;
}
.nav-button {
	width:176px;
	height:150px;
	float: left;
	font-family:helvetica;
	text-align:center;
	font-size:20pt;
	color:white;
}
#btnHome {
	background:#1E90FF;
	height:80px;
	padding-top:50px;
	display:none;
	margin:10px 5px 10px 10px;
}

The display none is for another jquery function,a simple load slidedown


<script>
$(document).ready(function() {
	$('#btnHome').slideDown(800);
	$('#btnAbout').slideDown(850);
	$('#btnMovies').slideDown(900);
	$('#btnContact').slideDown(950);
	$('#btnTheTeam').slideDown(1000);
})
</script>

I am very stumped, i am not to strong with jquery, any help?

Senff

You forgot the "c" in your first "function". :)

JohnMotylJr

Oh wow, no way i spelt function wrong.. lol thanks

JohnMotylJr

Well i had fixed my spelling, it is working in jsfiddle but not in the browser...? (Chrome latest version.)

How do i give it a mouseout or return false; to get back to its original color value?

http://jsfiddle.net/jD9F6/1/

Senff

I personally prefer to use mouseenter instead of mouseover (as well as mouseleave): http://jsfiddle.net/jD9F6/2/

JohnMotylJr

@Senff,

If you copy all those into an html file will it do the same. I cannot get it to work inside my browser, but it will work in JSFiddle ?

JohnMotylJr

Got it, the functions must be inside of the onload functions


<script>
$(document).ready(function() {
    $('#btnHome').slideDown(800);
    $('#btnAbout').slideDown(850);
    $('#btnMovies').slideDown(900);
    $('#btnContact').slideDown(950);
    $('#btnTheTeam').slideDown(1000);

	$('#btnHome').mouseenter(function() {
		$('body').css('background' , '#1E90FF');
	});

	$('#btnAbout').mouseenter(function() {
		$('body').css('background' , '#228B22');
	});

	$('#btnMovies').mouseenter(function() {
		$('body').css('background' , '#48D1CC');
	});
	
	$('#btnContact').mouseenter(function() {
		$('body').css('background' , '#FF4500');
	});

	$('#btnTheTeam').mouseenter(function() {
		$('body').css('background' , '#800080');
	});

	$('.nav-button').mouseleave(function() {
		$('body').css('background' , '#696969');
	});
});
</script>

treehouse : what would you like to learn today?

Forums

[Solved] What am i doing wrong? Jquery w/ mouseover