Develop Reference

Swap and save background color with jquery

I have a menu where on every hover of its links the background color of my page changes.
Now, let's say that my default index.html color is blue, and when I hover on about and contact I have yellow and red.
If I click on the about page its background color will be yellow, and if I hover on home it will go back blue.
What happens is when I mouseOut back to the page, the background changed to blue again, same if I'd hovered on contact.
Here there's my code in JS
$(document).ready(function() {
$('#about').hover(function() {
$('body').css('background-color', 'yellow');
}, function() {
$('body').css('background', '');
});
$('#contact').hover(function() {
$('body').css('background-color', 'red');
}, function() {
$('body').css('background', '');
});
And here there is the menu
<a id="about" href="about.html">about</a>
<a id="contact" href="contact.html">contact</a>
I assume I should do something like check if the current background color matches the hovered one, on mouseOut keep that color, otherwise set it to the initial one.
I'm not an expert of JS, especially when it comes to conditions.
Anybody could help me out?
Thanks!

If you want the color to stay the same after hovering, then you should remove the second parameter of hover():
$(document).ready(function() {
$('#about').hover(function() {
$('body').css('background-color', 'yellow');
});
$('#contact').hover(function() {
$('body').css('background-color', 'red');
});
});
https://jsfiddle.net/as9jpopd/
** EDIT **
If you want the color only to change when the user moves the mouse over the link and then back, then your code should work, only that closing brackets are missing:
$(document).ready(function() {
$('#about').hover(function() {
$('body').css('background-color', 'yellow');
}, function() {
$('body').css('background', '');
});
$('#contact').hover(function() {
$('body').css('background-color', 'red');
}, function() {
$('body').css('background', '');
});
});

Thanks to Joachim, but unfortunately that did not work. I uploaded an early stage of the website so you can take a look at the problem and the behaviour of the bg. http://mircofragomena.com/
As you see on the front page the bg is white, but when you hover changes. If you click on pickabrew, you will see the page in yellow as when hovered, but if you go again on the menu hover/out, the page goes back in white as the front page. It should stay yellow though, as it should happen with every other color/page.

I'm now using this other code
$(function() { // Shorthand for $(document).ready(function() {
var body = $('body');
var bg = body.css('background-color');
$('ul.nav a').hover(function() {
body.css('background-color', $(this).data('bgColor'));
}, function() {
body.css('background-color', bg);
});
});
related with this one on the links
<li>Posters</li>
though it does not work.
Is this a good starting code?

Hover out from two divs simultaneously

Have a look at the following JQuery code:
function my_hover()
{
$( "#up,#down" ).hover(
function() {
$("#up").animate({
"background-color": "#020306"
});
$("#down").animate({
"background-color": "#171716"
});
},
function() {
$("#up").css("background-color","#C8CACF" );
$("#down").css("background-color","#FAFAF8" );
}
);
}
There are two divs: #up,#down which I cannot wrap into a parent div(due to design restrictions). What I want to do is to animate the change in background color whenever #up or #down are being hovered. However, in case the mouse leaves one div by going directly to the other(the two divs are stuck together vertically) I do not want the last two lines of the above code being applied. I want them to be applied only when mouse hovers out from both divs. How may I achieve that? At users.sch.gr/ellhn you may see what is happening with the above code in the first left rectangle with the target photo (transition between up and down provokes change of color and that's not desirable).
Thank you

Try this.
HTML
<div id="up">Up</div>
<div id="down">down</div>
CSS
div{ transition:all 0.25s ease-in-out;}
#up{background:#C8CACF;}
#down{background:#FAFAF8;}
#up.up-hover{background-color:green;}
#down.down-hover{background-color:yellow;}
Script
$('#up, #down').mouseenter(function(){
//alert('hi')
$("#up").addClass('up-hover');
$("#down").addClass('down-hover');
})
.mouseleave(function(){
//alert('hi')
$("#up").removeClass('up-hover');
$("#down").removeClass('down-hover');
});
Fiddle Demo

Using the technique #nnnnn alluded to, e.g., using a timeout:
(function init() {
var $up = $('#up'),
$down = $('#down'),
hovered = false;
$up.hover(over, out);
$down.hover(over, out);
function over() {
hovered = true;
$up.css({
"background-color": "#020306"
});
$down.css({
"background-color": "#171716"
});
}
function out() {
setTimeout(function to() {
if (!hovered) {
$up.css("background-color", "#C8CACF");
$down.css("background-color", "#FAFAF8");
}
}, 1000);
hovered = false;
}
})();
http://jsfiddle.net/TudqT/3/
And with the elements inline next to each other, instead of vertically aligned:
http://jsfiddle.net/TudqT/5/

change css of body on mouseover

I want to get an highlighting effect on some various div container while the rest of the site should be dampened down in opacity including the background-image.
Any idea?
Why does this code not work? tried .hover() instead of .mouseover() too but the function won't react on any input...
$(function () {
$('body').mouseover(function () {
$('body').prop({
"background-color": "red";
});
});
});
Another try would be to set a frame around the body tag in the html and then set props to that frame while the hovered frame is in normal state but I have no idea how to do this. Just beginning with js dev. :)
EDIT: did a fail...
$(function () {
$('body').mouseover(function () {
$('body').css({
"opacity": "0.3";
});
});
});
should be that way...
any way to apply the opacity to the background image too?!

fiddle Demo
Use .css()
Set one or more CSS properties for the set of matched elements.
$(function () {
$('body').mouseover(function () {
$(this).css({
"background-color": "red"
});
//or $(this).css("background-color","red");
});
});
this
.prop()
Set one or more properties for the set of matched elements.

.prop() will set the property for a particular element. In your case you have to use .css() to set the style. Please read .prop() and .css() to see the difference.
Try this,
$(function(){
$('body').mouseover(function(){
$(this).css({"background-color":"red"});
});
});
DEMO

Here's a FIDDLE
body {
background: gray;
min-height: 1000px; /* For demo purposes */
}
css
$(function() {
$('body').on('mouseover', function() {
$(this).css({ backgroundColor: 'red' });
});
});
animate
$(function() {
$('body').on('mouseover', function() {
$(this).animate({ backgroundColor: 'red' }, 600);
});
});
*Note: For some reason it doesn't work with jQuery 1.x(edge).

I think this is what you might want: a "dim" DIV element that adds a semi transparent black box on the entire page, that puts itself "below" the DIV you want to highlight, and then some javascript to turn it off and on, and rearrange the z indexes. The HTML would look something like this:
this is some text
<div id="div1" class="dimmable">hello</div>
<div id="div2" class="dimmable">goodbye</div>
<div id="dim"></div>
And then the JS:
$('div.dimmable').hover(function() {
$(this).css('z-index', 101);
$('#dim')
.css('z-index', 100)
.width($(window).innerWidth())
.height($(window).innerHeight())
.fadeIn();
}, function() {
var dimmable = $(this);
$('#dim').fadeOut({complete: function() {
dimmable.css('z-index', 99);
}});
});
You can see it working here.
A slight catch: the DIVs need to have position:relative, otherwise you can't change their z-indexes and you can't put them on top of the "dim" DIV. Also, anything with a higher z-index will not stay behind the "dim", of course, but you can just use higher numbers as a workaround.

Call CSS3 hover effects with javascript mouseover event

How can I evoke CSS3 anmation through a javascript mouseover event rather than CSS mouseover :hover event?
$(.panel').on('mouseover', function{
//foo
});
Here is an example of animation on CSS mouseover

The best solution is to change the css so that it uses an additional class instead of :hover:
.animation.active {
background:transparent;
}
.animation.active span {
-webkit-transform:rotate(52.5deg);
-moz-transform:rotate(52.5deg);
rotation:52.5deg;
-webkit-transform:translate(1em, 0);
-moz-transform:translate(1em, 0);
translate(1em, 0);
}
and then you can toggle the class via jQuery:
$('button.toggle').on('click', function() {
$('a.animation').toggleClass('active');
});
Demo on JSFiddle

If I got you right, you should simply change CSS of that object manually:
$('button').on('click', function{
$('.animation:hover span').css('webkit-transform:rotate(52.5deg);'+
'-moz-transform:rotate(52.5deg);'+
'rotation:52.5deg;'+
'-webkit-transform:translate(1em, 0);'+
'-moz-transform:translate(1em, 0);'+
'translate(1em, 0);');'
});

Jquery Animated Tab - revert on mouseout

I'm trying to adapt Gaya Design's Animated Tabbed Content http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/ for a navigation menu. I want to have the background verting back to the first tab on mouseout but can't seem to get that working. Below is the Javascript for moving background function:
var TabbedContent = {
init: function() {
$(".tab_item").mouseover(function() {
var background = $(this).parent().find(".moving_bg");
$(background).stop().animate({
left: $(this).position()['left']
}, {
duration: 300
});
TabbedContent.slideContent($(this));
});
},
}
$(document).ready(function() {
TabbedContent.init();
});
And here is a link to what I'm trying to achieve. Link
Any help on how to get the background to revert to tab one on mouseout will be very much appreciated!
Thanks

What about triggeting the mouseover event of the first item:
$('.tabs').mouseout(function(){
$(this).find('.tab_item:first').mouseover();
});