Arka plan rengi

Question

ne elde etmek istediğiniz bir imlecin bir pozisyon üzerinde hover efekti koymaktır

.. Böyle

şey: Burada http://drmportal.com/

keman var: http://jsfiddle.net/onnmwyhd/

İşte kodum.

HTML

<div id="container"></div> 

CSS

#container{ 
background-color: #6fc39a; 
height:200px; 
} 

JQUERY bu ben bir pozisyondan üzerinde istediğiniz rengi olan

$("#container").mousemove(function(e){ 

var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; 
    $(this).html("X: " + x + " Y: " + y); 
}); 

Bir imlecin siyon ....

background-image: -webkit-linear-gradient(-35deg, #35a28e, #a8e4a5); 

Answer 1

ile imleci takip etmek için kullanmak tuvali kullandığı web sitesi, bu f Kesin reuslt

js fiddle

html için iddle

<div id="container" class="stalker"> 
    <canvas id="canvas" width="1600" height="433"></canvas> 
</div> 

css

.stalker { 
    background-color: #6fc39a; 
    height:200px; 
    border-top-color: rgba(168, 228, 165, 0.7); 
    border-bottom-color: rgba(53, 162, 142, 0.3); 
} 

komut

var stalker = $('.stalker'); 

var canvas = $('#canvas')[0]; 

var ctx = canvas.getContext('2d'), gradient, initialized = false; 

$("#container").mousemove(function(e){ 
    setTimeout(function(){ 
     initialized = true; 
     canvas.width = stalker.width(); 
     canvas.height = stalker.height(); 
     gradient = ctx.createRadialGradient(e.pageX, e.pageY, 0, e.pageX, e.pageY, canvas.width); 
     gradient.addColorStop(0, stalker.css('border-top-color')); 
     gradient.addColorStop(1, stalker.css('border-bottom-color')); 
     ctx.fillStyle = gradient; 
     ctx.fillRect(0, 0, canvas.width, canvas.height); 

    }, initialized ? 200 : 0); 
}); 

Answer 2

elemanın html üzerine yazarak kaçınarak imleç değerleri tutmak için #container için span öğe eklemeyi deneyin; absolute için cssposition seti, x için left seti, y için top set ile #container için div eleman ekleyerek referans olarak div

$(function() { 
 
    $("#container").mousemove(function(e) { 
 
    var x = e.pageX - this.offsetLeft; 
 
    var y = e.pageY - this.offsetTop; 
 
    $("div", this).css({ 
 
     left: x - (75/2), 
 
     top: y - (75/2) 
 
    }) 
 
    $("span", this).html("X: " + x + " Y: " + y); 
 
    }).mousemove(); 
 
})

#container { 
 
    background-image: -webkit-linear-gradient(-35deg, #35a28e, #a8e4a5); 
 
    background-image: linear-gradient(125deg, #35a28e, #a8e4a5); 
 
    background-color: #6fc39a; 
 
    height: 200px; 
 
} 
 
#container div { 
 
    background-image: -webkit-linear-gradient(-35deg, #35a28e, #a8e4a5); 
 
    width: 75px; 
 
    height: 75px; 
 
    position: absolute; 
 
    border-radius: 100px; 
 
    opacity: 0.5 
 
}

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

 
<div id="container"> 
 
    <span></span> 
 
    <div></div> 
 

 
</div>

jsfiddle http://jsfiddle.net/onnmwyhd/2/