Search code examples
javascriptjquerycssjquery-hover

.hover not working when the mouse leaves

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?

Solution

  • 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.