Движение подсветки кнопки за курсором

200

26 ноября 2016, 19:44

Здравствуйте! Я хотел бы стилизовать кнопки для веб-сайта в стиле win7. При наведении на кнопку должна плавно появятся подсветка и она должна следовать за курсором по кнопке, при убирании курсора с кнопки - подсветка плавно исчезает. В вебе я совсем-совсем новичок, поэтому любые вещи, даже самые простые - для меня очень сложны.

Для решения данной задачи нашёл два подхода:

Двигать градиент.

var originalBG = '', 
    lightColor = 'fff', 
    gradientSize = 5; 
 
$('div') 
.mousemove(function(e) { 
    originalBG = $("div").css("background-color"); 
    x  = e.pageX - this.offsetLeft; 
    y  = e.pageY - this.offsetTop; 
    xy = x + " " + y; 
 
    bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG; 
    bgMoz    = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)"; 
 
    $(this) 
      .css({ background: bgWebKit }) 
      .css({ background: bgMoz }); 
 
}).mouseleave(function() { 
        $(this).css({ background: originalBG }); 
});

div { 
    width: 200px; 
    height: 500px; 
    float: left; 
    margin: 5px; 
    background: red; 
}

<div></div> 
<div></div> 
<div></div> 
<div></div>

Двигать див1 внутри дива2

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15; 
$('.container').mousemove(function(e){ 
   $("#follower").show(); 
  var offset = $('.container').offset(); 
    console.log(e); 
   mouseX = Math.min(e.pageX - offset.left, limitX); 
   mouseY = Math.min(e.pageY - offset.top, limitY); 
   if (mouseX < 0) mouseX = 0; 
   if (mouseY < 0) mouseY = 0; 
}); 
 
$('.container').mouseleave(function() { 
        $("#follower").hide();  
});     
 
// cache the selector 
var follower = $("#follower"); 
var xp = 0, yp = 0; 
var loop = setInterval(function(){ 
    // change 12 to alter damping higher is slower 
    xp += (mouseX - xp) / 12; 
    yp += (mouseY - yp) / 12; 
    follower.css({left:xp, top:yp}); 
     
}, 30);

#follower{ 
  position : relative; 
  background-color : yellow; 
  width:15px; 
  height:15px; 
  border-radius:50px; 
  margin: -10px 0 0 -10px; 
    display: none 
} 
 
.centerdiv { 
    width:150px; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
} 
.container 
{ 
    width:150px; 
    height:150px;    
    position:absolute; 
    top:0; 
    left:0; 
    overflow:hidden; 
    border:1px solid #000000; 
}

<div class="centerdiv"> 
<div class="container"> 
        <div id="follower"></div> 
</div></div>

Какой способ более оптимален? Может есть какие-то иные способы или готовые реализации?

Взяв за основу второй способ, породил вот это творение: https://jsfiddle.net/fsb1337/jqnrfLL4/ Но тут у меня проблема в том, что нужно задавать актуальные координаты для конкретного экземпляра класса .follower в зависимости от того на какой конкретный экземпляр класса .container навели мышь. Как это сделать?