変更背景画像のjQuery

HTMLセットアップ変更背景画像のjQuery

とdivの上で私は絵のように設定しているときホバーホバー。私はユーザーが各赤いボックスの上にマウスを置いて、マウスが各ボックスの上に来るようにするために、バックグラウンド（背景は灰色）を背景の画像に変更したい。別の写真とは別の写真。私が持っている私のCSSの：

#service { 
background: grey;}

私はこのjQueryのコードを書いた：

$service = $('#service'); 
$('.service-list').on('mouseover', 'div', function() { 
    $service.css('background-image', 'url(' + $(this).attr("data-uri") + ')'); 
});

をそれが働いていません。私はまた、彼らは約650kbので、その滑らかで瞬時に、プリロードする背景の写真が欲しい。私はdiv要素と呼ばれるプリロードをするつもり、その後

<img src="path/image-01.png" width="1" height="1" alt="Image 01" />

を行い、その後、表示なしをプリロードしないでください...それが動作するかどうIDKました。、私はサービスのdivの背景の背景を変更したい、ちょうど明確にすることが

編集---- を助けてくださいませんそれぞれ赤いボックスの背景

出典

2016-10-24 tdogp

私たちが見ることができるjsfiddleまたはライブデモを作成した方がはるかに良いでしょうか？ – Andrew

なぜ単にホバーにCSSを使用しないのですか？そのほうがはるかに簡単です – jogoe

CSSの代わりにjQueryを使用したい場合は、.hover（）を試すことができます：https://api.jquery.com/hover/ – Sergiodiaz53

のあなたはjQueryのホバー機能によって、これを達成することができます。

$service = $('#service'); 

$('.greay-box').hover(function() { 
    $service.css('background-image', 'url(' + $(this).attr("data-uri") + ')'); 
     }, function(){ 

    $service.css('background-image', ''); 

    });

fiddleの例を示します。これがあなたを助けることを願っています

出典

2016-10-24 10:44:54 Sasith

の部分だけをクリアしたい、赤いボックスの背景ではなくサービスの背景の背景を変更したい場合は – tdogp

私は自分の答えを更新しました。今すぐチェックしてください。 – Sasith

こんにちは私はあなたが探していますこのような画像を変更しようとします。 jQueryの

var sourceSwap = function() { 
 
     var $this = $(this); 
 
     var newSource = $this.data('alt-src'); 
 
     $this.data('alt-src', $this.attr('src')); 
 
     $this.attr('src', newSource); 
 
    } 
 

 
    $(function() { 
 
     $('img.xyz').hover(sourceSwap, sourceSwap); 
 
    });

.my { 
 
     width:100px; 
 
     height:100px;  
 
     overflow:hidden; 
 
     border: 2px solid red; 
 
      float:left; 
 
      padding:2px; 
 
      margin:2px; 
 
     
 
    } 
 
    .my img { 
 
     min-width:100%; 
 
     max-width:100%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <body> 
 

 

 
<div class="row"> 
 

 
<div class="my"> 
 
    <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/5d/63/2e/5d632ede715b92de1c2db866029282b5.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" /> 
 
</div> 
 
<div class="my"> 
 
    <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/5d/63/2e/5d632ede715b92de1c2db866029282b5.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" /> 
 
</div> 
 
<div class="my"> 
 
    <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/fa/11/c2/fa11c23eddc07d0dd8b26432750df85e.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" /> 
 
</div> 
 
<div class="my"> 
 
    <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/fa/11/c2/fa11c23eddc07d0dd8b26432750df85e.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" /> 
 
</div> 
 
</div> 
 

 
    </body> 
 
    </html>

を使用すると、フィドルを確認することができます。。。 UPDATED FIDDLE DEMO LINK

出典

2016-10-24 11:22:05

私はサービス部門のバックグラウンドを変更したい、赤いボックスの背景ではない – tdogp

helloは更新されたフィドルをチェックする。イメージクラス1と4のservice_listを使用する。ない –

答えて

関連する問題