Hello! I would like to style the buttons for a win7 style website. When you hover over the button, the backlight should appear smoothly and it should follow the cursor by the button; when you move the cursor away from the button, the backlight will disappear smoothly. In the web, I am very, very new, so any things, even the most simple ones, are very difficult for me.

To solve this problem I found two approaches:

Move the gradient.

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>

Move div1 inside diva2

 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>

Which method is more optimal? Maybe there are some other ways or ready-made implementation?

Taking the second method as a basis, I created this creation: https://jsfiddle.net/fsb1337/jqnrfLL4/ But here I have a problem in that I need to set the actual coordinates for a particular instance of the class .follower, depending on which particular instance class .container hover mouse. How to do it?

    1 answer 1

     ns4 = (document.layers) ? true : false ie4 = (document.all) ? true : false function init() { if (ns4) { document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = mousemove; } function mousemove(event) { var mouse_x = y = 0; if (document.attachEvent != null) { mouse_x = window.event.clientX; mouse_y = window.event.clientY; } else if (!document.attachEvent && document.addEventListener) { mouse_x = event.clientX - 150; mouse_y = event.clientY - 100; } document.getElementById('test').style.backgroundPosition = '0 0,0 0,' + mouse_x + 'px ' + mouse_y + 'px,0 0'; } init() 
     body { width: 100vw; height: 100vh; background: linear-gradient(transparent, rgba(0, 0, 0, .8) 100%), url('http://s017.radikal.ru/i443/1508/44/6a78a290f954.png'), url('http://s45.radikal.ru/i109/1508/08/0c104c0f72c8.png') no-repeat, #000; background-position: 0 0, 0 0, 100px 100px, 0 0; } 
     <body id="test"> </body>