Übergang Hintergrundbild auf Hover

Question

Ich versuche, einen Weg zu finden, von einem Hintergrundbild zu einem anderen zu wechseln, wenn ich ein Div schweben.

Hier ist eine Demo: mein Code

codepen demo

Hier

$('#cat').hover(function(){ 
    $('.image').css('background-image', 
    "url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb')"); 
}); 

Irgendwelche Ideen?

Answer 1

Zuerst fehlen Ihnen IDs für Ihre <h1>, weil Ihre JQuery Elemente mit ID Katze, Hund und Hase auswählen. seccond, was Sie sollten, ist, ändern background von '.bg' Klasse, nicht '.image' Klasse

HTML

<h1 id="cat">CAT</h1> 
<h1 id="dog">DOG</h1> 
<h1 id="rabbit">RABBIT</h1> 

JS

$('#cat').hover(function(){ 
    $('.bg').css('background-image', "url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb')"); 
}); 

$('#dog').hover(function(){ 
    $('.bg').css('background-image', "url('https://images.unsplash.com/photo-1469225208447-8329cbd3cb3a')"); 
}); 

$('#rabbit').hover(function(){ 
    $('.bg').css('background-image', "url('https://images.unsplash.com/photo-1478754351612-f8b7577a3859')"); 
}); 

Demo: https://jsfiddle.net/z2hevmya/

Answer 2

var images = { 
 
    "cat":'https://images.unsplash.com/photo-1485198963969-3f6b12e49abb', 
 
    "dog" : 'https://images.unsplash.com/photo-1469225208447-8329cbd3cb3a', 
 
    "rabbit" : 'https://images.unsplash.com/photo-1478754351612-f8b7577a3859' 
 
}; 
 

 
$('.menu').hover(function(){ 
 
    var img = $(this).attr("id"); 
 
    $('.bg').css('background-image', "url(" + images[img] + ")"); 
 
});

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
h1 { 
 
\t z-index: 100; 
 
\t color: #456; 
 
\t font-family: sans-serif; 
 
\t position: relative; 
 
\t opacity: .5; 
 
\t transition: all ease 1s; 
 
\t cursor: pointer; 
 
\t height: 1em; 
 
\t padding: .5em; 
 
\t margin: 0; 
 
} 
 

 
h1:hover { 
 
\t opacity: 1; 
 
} 
 

 
.bg { 
 
\t position: fixed; 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t background: url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb') no-repeat center; 
 
\t background-size: cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="bg"></div> 
 

 
<h1 id="cat" class="menu">CAT</h1> 
 
<h1 id="dog" class="menu">DOG</h1> 
 
<h1 id="rabbit" class="menu">RABBIT</h1>

Answer 3

<script language="javascript"> 
 
     $(function() { 
 
      
 
      $('.mDiv').hover(function() { 
 
         $(this).addClass('divHover'); 
 
        }, function() { 
 
         $(this).removeClass('divHover'); 
 
        } 
 
      ); 
 
     }); 
 
    </script>

<style type="text/css"> 
 
     .mDiv { 
 
      height: 300px; 
 
      width: 200px; 
 
      background: darkgrey; 
 
      border: solid 1px #ccc; 
 
      float: left; 
 
      margin-right: 10px; 
 
     } 
 
     .divHover{ 
 
     // background-image: you " img url"; 
 
      background: greenyellow; 
 

 
     } 
 
    </style>

<div id="d"> 
 
    <div class="mDiv">Test</div> 
 
</div>