懸停轉換背景圖像

我試圖找到一種方法，從一個背景圖像轉換到另一個時，我將鼠標懸停在div上。懸停轉換背景圖像

這裏有一個演示：

這裏是我的代碼

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

任何想法？

來源

2017-06-03 meow-meow-meow

首先，您缺少您的<h1>的ID，因爲您的JQuery選擇ID爲cat，dog和rabbit的元素。 seccond，你應該改變的是 '.bg' 類，而不是 '圖像配' 類

HTML的background

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

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

演示：https://jsfiddle.net/z2hevmya/

來源

2017-06-03 03:18:25 Mark

謝謝你，我是個白癡 –

這是回答你的問題......但看看這種方法... https://codepen.io/ sheriffderek/pen/22147c685cb98d0772ee035a78d6bd49/ – sheriffderek

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>

來源

2017-06-03 05:11:13

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

來源

2017-06-03 06:10:45 tjian

您的回答似乎不完整 –

懸停轉換背景圖像

回答

相關問題