Change background image on link hover

Question

So I have this problem, which I couldn\'t find, even though I did a thorough websearch.

I am making my portfolio, and the background is a picture of a woman, located in

Answer 1

You don't need JavaScript to do that, you can use :hover pseudo-class on pure CSS 2.1:

#baggrund:hover {
    background-image: url('images/Kat5.jpg');
}

Answer 2

Here's perfect tested solution:

$(document).ready(function() {

        $('a.class').hover(

           function () {
              $('#portfolio').css('background-image', 'url("other.jpg")');
           }, 

           function () {
              $('#portfolio').css('background-image', 'url("woman.jpg")');
           }
        );

     });

Answer 3

Here's a generic jquery answer to your question:

$('a.class').on('mousein', function(){
   $('#portfolio').css('background-image', 'url("other.jpg")');
});
$('a.class').on('mouseout', function(){, function(){
  $('#portfolio').css('background-image', 'url("woman.jpg")');
});

Answer 4

Yes, here's a rough example via JSFiddle http://jsfiddle.net/dGnMX/

<nav>
     <a id="first">Link 1</a>
     <a id="second">Link 1</a>
     <a id="third">Link 1</a>
    </nav>

$("#first").click(function () {

    $("body").css("background-image", 'url("http://static.bbc.co.uk/solarsystem/img/ic/640/collections/space_exploration/space_exploration_large.jpg")');

});



$("#second").click(function () {

    $("body").css("background-image", 'url("http://i.telegraph.co.uk/multimedia/archive/02179/Milky-Way_2179177b.jpg")');

});

$("#third").click(function () {

    $("body").css("background-image", 'url("http://www.thatsreallypossible.com/wp-content/uploads/2012/12/Space-Colonialisation.jpg")');

});