पृष्ठभूमि रंग

Question

कि मैं क्या हासिल करना चाहते हैं एक कर्सर की स्थिति पर एक हॉवर प्रभाव डालने के लिए है ..

कुछ इस तरह: http://drmportal.com/

यहाँ एक बेला है: http://jsfiddle.net/onnmwyhd/

यहां मेरा कोड है।

एचटीएमएल

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

सीएसएस

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

jQuery

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

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

इस रंग है कि मैं एक posi पर चाहते है एक कर्सर के tion ....

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

Answer 1

साथ ट्रैकिंग कर्सर आपके संदर्भ में के लिए उपयोग करने के लिए वेबसाइट यह कैनवास का उपयोग करती है, यह एफ देखें सटीक reuslt

js fiddle

एचटीएमएल के लिए iddle

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

सीएसएस

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

स्क्रिप्ट

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

#container को span तत्व जोड़ तत्व की html अधिलेखन से बचने के लिए कर्सर मान धारण करने के लिए प्रयास करें; csspositionabsolute करने के लिए सेट, x को left सेट, y को top सेट के साथ #container को div तत्व जोड़ 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/