javascript - Change background image on link hover - Stack Overflow

admin管理员组

文章数量:1431516

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 the center. On the left I have a nav bar with link to other pages.

What I basicly want, is the background image to change when I hover over one of the links. Whether it's through CSS, Javascript or JQuery, I want to know if it's possible.

Thank you in advance.

Edit: Sorry, I'll try to provide the best I can.

HTML

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.js"></script>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<div class="header">/jacob gerlif pilegaard/</div>
<div class="underheader">portfolio</div>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="gallery.html"">Gallery</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul> 
 <h1>About me...</h1>
 <p> bla bla bla bla bla</p>
 <div id="circles"></div>

This is the basic html. The id="baggrund" is the image I want to change to something else.

CSS

#baggrund {
background-image: url(images/laerkeryg.jpg);
background-repeat: no-repeat;
width: 720px;
height: 394px;
position: absolute;
left: 805px;
top: 10%;}

This is the CSS for the image I want to have replaced.

Jquery

$( document ).ready(function() {
    $("#first").hover(function () {
    $("baggrund").css("background-image", 'url("images/Kat5.jpg")');
});
});

Hope this helps, and thanks again.

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 the center. On the left I have a nav bar with link to other pages.

What I basicly want, is the background image to change when I hover over one of the links. Whether it's through CSS, Javascript or JQuery, I want to know if it's possible.

Thank you in advance.

Edit: Sorry, I'll try to provide the best I can.

HTML

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.js"></script>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<div class="header">/jacob gerlif pilegaard/</div>
<div class="underheader">portfolio</div>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="gallery.html"">Gallery</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul> 
 <h1>About me...</h1>
 <p> bla bla bla bla bla</p>
 <div id="circles"></div>

This is the basic html. The id="baggrund" is the image I want to change to something else.

CSS

#baggrund {
background-image: url(images/laerkeryg.jpg);
background-repeat: no-repeat;
width: 720px;
height: 394px;
position: absolute;
left: 805px;
top: 10%;}

This is the CSS for the image I want to have replaced.

Jquery

$( document ).ready(function() {
    $("#first").hover(function () {
    $("baggrund").css("background-image", 'url("images/Kat5.jpg")');
});
});

Hope this helps, and thanks again.

• javascript
• jquery
• css
• hover
• mouseover

Share Improve this question Follow edited Sep 17, 2013 at 20:44 Jacob asked Sep 17, 2013 at 19:52 Jacob Jacob 22722 gold badges55 silver badges1313 bronze badges 3

• 2 Please provide relevant HTML/CSS/JS demonstrating what you have tried - and yes - to answer your question, this is possible. – Josh Crozier Commented Sep 17, 2013 at 19:53
• 1 stackoverflow./questions/11940645/… – Pevara Commented Sep 17, 2013 at 19:54
• Here the answer of you question : Yes it is possible. What have you tried? – Karl-André Gagnon Commented Sep 17, 2013 at 19:56

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

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")');
});

Yes, here's a rough example via JSFiddle http://jsfiddle/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./wp-content/uploads/2012/12/Space-Colonialisation.jpg")');

});

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');
}

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")');
           }
        );

     });

Here's the solution i've e across by changing background-image position on hover

<!--HTML-->
<div class="twitter1">
    <a href="https://twitter.">
    </a>
</div>

/*CSS*/
.twitter1 a{
display: block;
background: url(12.\ Sprites.png) 0px 0px;
background-repeat: no-repeat;
width: 50px;
height: 47px;
}

.twitter1 a:hover{
background: url(12.\ Sprites.png) 0px 52px;
}

本文标签： javascriptChange background image on link hoverStack Overflow