Fare konumuna bağlı olarak bir alanın opaklığını değiştirin

Question

Arka planın opaklığını değiştirmek için yalnızca imleç alanının altını değiştirmek mümkün mü (örneğin beyaz küçük daire)? Bunu basit bir ısı haritası gibi düşünüyorum ama ısı kalmıyor - sadece imleci takip ediyor.

html { 
    background-color: #000; 
    width: 100%; 
    height: 100%; 
} 

JS:

$(document).mousemove(function(event){ 
    var i = event.pageX.toPrecision(1)/1000; 
    $("html").css('opacity', i) 
}); 

Maalesef bu muhtemelen bir çok temel bir başlangıç ​​noktasıdır aşağıdaki

HTML bilgisi anda

. Tuvali kullanmam gerekecek mi?

Answer 1

Sen yapabileceği

svg

kullanarak yaptım Ne: - Aynı ko koordinatIara, yükseklik ve genişliğe sahip iki aynı görüntüleri yerleştirilir ve tam olan (üstte birine dairesel clip-path verdi

fare daire pozisyonu da

$('svg').on('mousemove',function(e){ 
 
    $('.a').attr('cx',e.pageX).attr('cy',e.pageY) 
 
     
 
})

.one{ 
 
    opacity:.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg width="500" height="500"> 
 
    <clippath id="clip" > 
 
     <circle cx="50" cy="50" r="50" class="a"/> 
 
    </clippath> 
 
    
 
    <image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" class="one"/> 
 
     
 
    <image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" clip-path="url(#clip)"/> 
 
    </svg>

değişikliği hareket opaklık)