Html、Css。 mouseout（bg imgの場合）

Question

私は背景画像を持つ同じ親を持つdivのグループを持っています。私はdivの色を変更するmouseoverイベントがあります。私はdivが元の色を持つようにしたいと思います。問題は、divの "color"が白や赤や特定の色のようなものではないということです。そのdivの後ろにある親bg画像の部分です。親の背景画像の上にある各div（正方形のようなもの）。私はそれらのdivのために、mouseoutが起こったときに、上にある親のbgイメージの部分を復元したいと思います。

div.onmouseover = function() { 
    this.style.backgroundColor = "red"; // Ok 
} 
div.onmouseout = function() { 
    //change div background to that specific part of parent bg image 
} 

どのようにすればいいですか？

Answer 1

I希望クラスと使用することをお勧め「：ホバー」あなたが直接あなたが使用して、透明な背景を設定することができ、スタイリングを設定したいがあれば、プロパティをマウスアウトための「透明」またはRGBA

this.style.backgroundColor = "transparent" 

または

this.style.backgroundColor = rgba(0,0,0,0); 

Answer 2

@デッケル回答。

「マウスを動かすと背景を変更するだけで、バックグラウンドは元の状態に戻ります」。うまくいきました

Answer 3

なぜ、これを行うのかわかりません。背景色を透明にするだけで、親のdiv背景が表示されるためです。

しかし、何らかの理由でこの種の技術が必要な場合は、Canvasオブジェクトを使用する必要があります。 理論はこのようにすべきです。 マウスがトリガーされたとき：

• 親divのdivの相対位置を計算します。
• divの幅と高さを取得します。
• 作成&キャンバスを初期化し、キ​​ャンバスにイメージの一部を描画します。
• キャンバスからdataURLを取得してから、マウス出力トリガーdivの背景として設定します。

コードスナップ以下の通りです：そのイメージは、サブのdivに描かれていることを確認するために

var canvas = null; 
var ctx = null; 
var img_loader = null; 


function initCanvas() { 
    canvas = document.getElementById('canvas'); 
    canvas.width = 221; 
    canvas.heigth = 221; 
    ctx = canvas.getContext("2d"); 
    img_loader = document.getElementById('imgloader'); 

    var bg = 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Flower_poster_2.jpg/677px-Flower_poster_2.jpg'; 
    img_loader.src = bg; 
} 


$(document).ready(function(){ 
    initCanvas(); 
    $('.box').hover(function() { 
    $(this).css('background-color', 'red'); 
    $(this).css('background-image', 'none'); 
    }, function() { 
    // set div background based on wrapper bg 
    var pos = $(this).position(); 
ctx.drawImage(img_loader,pos.left,pos.top,canvas.width, canvas.height,0,0,canvas.width, canvas.height); 
    $(this).css('background-color','transparent'); 
    $(this).css('background-image','url(' + canvas.toDataURL() + ')'); 

    }); 


}) 

Check the code on JSFIddle: Using Canvas to set the background

が、私は親のdiv無背景を作った、とだけ静的使用していますコード内の画像URL。 だから最初にあなたはダークブルーのボードを見るでしょう、そして、あなたがそれを赤くすると、マウスが出ると、サブ画像が描かれます。