.hover not working when the mouse leaves

Question

When the mouse hovers over an anchor .I1 , I want to do this:

$("html").css("background","url(Photos/8143009-exterior06.jpeg) no-repeat center center fixed");
$(".opacity").css("opacity", "0.7");

And when the mouse leaves to do this:

$("html").css("background","");
$(".opacity").css("opacity", "1"); 
//which is the same as going back to what it was before it's hovered 

---

Here is what I have, which doesn't work:

HTML

<a class="I1" href="Photos/8143009-exterior06.jpeg">
    <img src="Photos/8143009-exterior06.jpeg" alt="" width="297" height="200" />
</a>

JS :

$(".I1").hover(function(){
    $("html").css("background","url(Photos/8143009-exterior06.jpeg) no-repeat center center fixed");
    $(".opacity").css("opacity", "0.7");
});

I want to do this for each photo, in a displayed row of photos.

Is there also a quicker way to do that, rather than having to write the script for each photo?

Answer 1

The documentation about hover() states this (see reference):

.hover( handlerIn(eventObject), handlerOut(eventObject) )

You are calling a custom function when the mouse enters (first parameter of hover()), and not when it leaves (second parameter).

So, you might change your code for this:

$(".I1").hover(function(){
     $("html").css("background","url(Photos/8143009-exterior06.jpeg) no-repeat center center fixed");
     $(".opacity").css("opacity", "0.7");
},function(){
     $("html").css("background","");
     $(".opacity").css("opacity", "1")
});

Edit

I think it's better for you to stick with my proposition, it's not that much longer.

Without more information about what you're trying to achieve, here's my guess: you'll have multiple .I1, and as you were about to code it, it would have been very long to copy / paste this hover function for each elements and put the right picture link in each. (correct me if I'm wrong)

What I propose you to do, is extracting the link of your picture, and use it as your html background (and so, whatever the hovered element, the background will adapt).

$(".I1").hover(function() {        
     var imageToPrint = 'url(' + $('img',this).attr('src') +')';
     $("html").css("background", imageToPrint + "no-repeat center center fixed");
     $(".opacity").css("opacity", "0.7");
},function(){
     $("html").css("background","transparent");
     $(".opacity").css("opacity", "1")
});

Here's a fiddle for demonstration.

Answer 2

Check this link http://api.jquery.com/mouseenter/.

They are doing just the thing you want but they are changing the text in the divs ( look at the example at the bottom) and you need to change the background.

I hope I helped.

Answer 3

    //When mouse rolls over
    $(".I1").bind('mouseover mouseenter', function() {
        //do stuff
    });

    //When mouse is removed
    $(".I1").bind('mouseout mouseleave', function() {
        //do stuff
    });

Might use this. :)