Develop Reference

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/

Replace image on hover

I'm trying to replace an image with another image.
Since the webpage, that i'm building, has to be viewable in IE8, then CSS based solutions played out quircky.
I tried the
display: none; and display: block; trick
opacity: 0; and opacity: 1; trick
But they both don't function as I want to (centered inside a div, because IE8 plays some stuff differently, then I thought that may-be a simple src="" swaping will do the trick.
I started with jquery, but since I'm pretty bad with understanding the $(this) and DOM, then it isnt working at all, but i think I got my logic right.
So, HTML is here:
<div class="wrapper">
<a href="#">
<img class="original" src="http://placekitten.com/200/200">
<img class="overlay" src="http://placekitten.com/g/200/200">
</a>
…
…
So I have numerous a tags inside a wrapper, each containing two images. As they are responsive and having the same ratio, then no sizes are needed.
And my started jquery:
$('.wrapper a').hover(
function () {
var original = $(this).attr('src');
var overlay = $(this).next().attr('src');
$(this).children('.original').attr('src', overlay);
},
function () {
$(this).children('.original').attr('src', original);
}
);
And here's the JSFiddle .
So, I'm really after this, that each a tag I have inside a wrapper would change the image according to the images inside of that tag.

You don't need javascript here at all. Really. Use CSS:
.wrapper a:hover .original {
display: none;
}
.wrapper a:hover .overlay {
display: inline-block;
}
Demo: http://jsfiddle.net/hHyh6/10/

You should simply show overlay image on hover and hide original image
$('.wrapper a').hover(function () {
$(this).find('.original').toggle();
$(this).find('.overlay').toggle();
}, function () {
$(this).find('.original').toggle();
$(this).find('.overlay').toggle();
});
DEMO

Instead you can try this:
$('.overlay').hide(); //<----------first hide the overlay image
$('.wrapper a').hover(function () {
$(this).find('.overlay').show().add(this).find('.original').hide();
// here find the overlay and show it and hide the original
}, function () {
$(this).find('.overlay').hide().add(this).find('.original').show();
// here find the overlay and hide it and show the original
});
Demo # Fiddle using .end()
Demo # Fiddle using .add(this)

try this js i also tried in your fiddle too it works
var current_cash;
$('.wrapper a').hover(
function () {
current_cash = $(this).find('.original').attr('src');
var overlay = $(this).find('.overlay').attr('src');
$(this).children('.original').attr('src', overlay);
},
function () {
$(this).children('.original').attr('src', current_cash);
}
);

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.

Jquery Rollover with Effects

I create this rollover with jquery , but no get works animate background mouseover :
<script>
$(function () {
var number_menus=5;
for(i=1;i<=number_menus;i++)
{
if(i%2==0)
{
var p1=1;
$(".web_header_mb_"+i).show(1000).css("background","url(imagenes/botones/head_"+p1+"_up.png)");
$(".web_header_mb_"+i).mouseover(function() {
$(this).css("background-image","url(imagenes/botones/head_"+p1+"_down.png)");
$(this).animate(
{backgroundPosition:"(0 -250px)"},
{opacity:3.0},
{height: 'toggle'},
{duration:2000}
);
});
$(".web_header_mb_"+i).mouseout(function() {
$(this).css("background-image","url(imagenes/botones/head_"+p1+"_up.png)");
});
}
else
{
var p2=2;
$(".web_header_mb_"+i).show(1000).css("background","url(imagenes/botones/head_"+p2+"_up.png)");
$(".web_header_mb_"+i).mouseover(function() {
$(this).css("background-image","url(imagenes/botones/head_"+p2+"_down.png)");
});
$(".web_header_mb_"+i).mouseout(function() {
$(this).css("background-image","url(imagenes/botones/head_"+p2+"_up.png)");
});
}
}
});
</script>
<div id="web_header_menu_boton" class="web_header_mb_1" style="display:none;">1</div>
<div id="web_header_menu_boton" class="web_header_mb_2" style="display:none;">2</div>
<div id="web_header_menu_boton" class="web_header_mb_3" style="display:none;">3</div>
<div id="web_header_menu_boton" class="web_header_mb_4" style="display:none;">4</div>
<div id="web_header_menu_boton" class="web_header_mb_5" style="display:none;">5</div>
When i go mouseover i try get animate background as transition between 2 different backgrounds , but no get
Regards !!! :)

Here is a demo of what I think you are asking for http://jsfiddle.net/d6pQx/32/. Let me know if this works.

jQuery hover animation

I want to appy a hover effect to div boxes, may be up to 60 boxes on a page. It should be quite equal to the css hover effect but I want to apply a fade effect to the hover color. E.g. I have light green as background color and dark green as hover background color, then it should fade from the one to the other side.
I played a bit around with jQuery but could get the result that I wanted:
$(".box").hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
});

You need to use a decent color plug-in. See jQuery animate backgroundColor for more information.
Also, your original code is not really going to do anything, as you want it to animate to another colour afterwards.
$(".box").each( function () {
$(this).data('baseColor',$(this).css('color'));
$(this).hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: $(this).data('baseColor') }, 500);
});
});
EDIT: see http://jsfiddle.net/eHXNq/2/ for example.

I don't have much experience with jQuery, but it looks like just a copy-and-paste mistake, since you have the same color in both .animate()s

I believe you are not using the hover function like you should. the second function is used when the user leave the box so your should return to the original color.
White for example:
$(".box").hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#FFFFFF" }, 500);
});

$(".box").hover(
function () {
// this is mouseover
},
function () {
// this is mouse out
}
);
see example here
http://jsfiddle.net/krRse/

review this code, I think this might help you!!!
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
<script>
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
</script>
</body>
</html>
take a look at this link too,
http://api.jquery.com/hover/

60 boxes? Please use event delegation, or live.