Ändern Sie hintergrund-Bild auf hover-link

Also ich habe das problem, das ich nicht finden konnte, obwohl ich habe eine Gründliche Suche im Internet.

Mache ich mein portfolio, und der hintergrund ist ein Bild von einer Frau, die sich in der Mitte.
Auf der linken Seite habe ich eine Navigationsleiste mit Links zu anderen Seiten.

Was ich im Grunde will, ist das Hintergrundbild zu ändern, wenn ich den Mauszeiger über einem der links.
Sei es durch CSS -, Javascript-oder JQuery, ich möchte wissen, ob es möglich ist.

Vielen Dank im Voraus.

Bearbeiten:
Sorry, ich werde versuchen, die beste, die ich kann.

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>

Dies ist die html-Grundkenntnisse. Die id="baggrund" ist das Bild, das ich ändern möchte, um etwas anderes.

CSS

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

Dies ist der CSS-Code für das Bild möchte ich ersetzt haben.

Jquery

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

Hoffe, das hilft und nochmals vielen Dank.

Bitte geben Sie relevante HTML/CSS/JS zu zeigen, was Sie versucht haben - und ja - um deine Frage zu beantworten, wie dies möglich ist.
stackoverflow.com/questions/11940645/...
Hier die Antwort auf deine Frage : ja es ist möglich. Was haben Sie versucht?

InformationsquelleAutor Jacob | 2013-09-17

1

Hier ist eine generische jquery Antwort auf Ihre Frage:
```
$('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")');
});
```
- Das war es, was ich suchte. Ich danke Ihnen sehr. Scheint so, als wenn mein jquery-Bibliothek wurde nicht richtig installiert, unter anderem. Danke sehr viel wieder.
InformationsquelleAutor Eric H.

Ja, hier ist ein einfaches Beispiel über 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")');

});

InformationsquelleAutor Daniel Schwarz

0

Brauchen Sie nicht JavaScript, das zu tun, können Sie :hover pseudo-Klasse, die auf reinem CSS 2.1:
```
#baggrund:hover {
    background-image: url('images/Kat5.jpg');
}
```
InformationsquelleAutor falsarella

Hier die perfekte Lösung getestet:

$(document).ready(function() {

        $('a.class').hover(

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

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

     });

InformationsquelleAutor Atif Tariq

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.