5

Возникла потребность сделать как бы подсветку курсора на кнопках. То-бишь, чтоб когда провожу им по кнопке, то под курсором был какой-то градиент, фон, кружок.. что- не очень важно.

Вопрос вот в чём: как это лучше реализовать? Перемещать что-то на самом фоне кнопки или просто создать прозрачный блок с бекграундом и перемещать уже его?

1
  • 2
    можно просто поменять курсор
    – Grundy
    Commented 3 апр. 2018 в 14:01

3 ответа 3

10

Мы не ищем лёгких путей!

var curBg = document.querySelectorAll('.cur-bg'),
  mouseBg = document.getElementById('mouse-bg');

for (var i = 0; i < curBg.length; i++) {
  curBg[i].addEventListener('mousemove', foo, false);
  curBg[i].addEventListener('mouseleave', boo, false);
}

function foo(event) {
  mouseBg.style.display = 'block';
  mouseBg.style.left = (event.clientX - 7) + 'px'
  mouseBg.style.top = (event.clientY - 7) + 'px'
}

function boo() {
  mouseBg.style.display = 'none';
}
  #mouse-bg {
  width: 15px;
  height: 15px;
  border-radius: 8px;
  background: linear-gradient(270deg, #41bd9d, #d72222);
  background-size: 400% 400%;
  display: none;
  position: absolute;
  pointer-events: none;
  -webkit-animation: AnimationName 1s ease infinite;
  -o-animation: AnimationName 1s ease infinite;
  animation: AnimationName 1s ease infinite;
}

@-webkit-keyframes AnimationName {
  0% {background-position: 0% 50%}
  50% {background-position: 100% 50%}
  100% {background-position: 0% 50%}
}

@-o-keyframes AnimationName {
  0% {background-position: 0% 50%}
  50% {background-position: 100% 50%}
  100% {background-position: 0% 50%}
}

@keyframes AnimationName {
  0% {background-position: 0% 50%}
  50% {background-position: 100% 50%}
<input class="cur-bg" type="button" value="button" />
<button class="cur-bg">button</button>
<span class="cur-bg">button</span>

<div id="mouse-bg"></div>

9

Самое простое - нарисовать png-шку и подменять ею внешний вид курсора при ховере на кнопке введите сюда описание изображения

button {
 padding: 5px;
}

button:hover {
  cursor: url("https://i.sstatic.net/QRS91.png"), default;
}
<button>
КНОПКА
</button>

0

Всем спасибо за ответы!

По примеру Kirill Korushkin сделал следующее:

(без использования class)

(function () {
	"use strict";
	var EX = function (f1, f2) {
		/**упрощение работы с get и set.
		возвращает {get:function(){return f1;},set:f2},
		если f2=true, то set:f1, если f2 нет, то set:undefined
		 **/
		return {
			get: function () {
				return f1;
			},
			set: f2 === true ? f1 : f2 || undefined
		};
	};
	EX.auto = function (f1, f2) {
		/**тоже упрощает работу с get и set.
		возвращает:
		если f2=setget, EX(f1,true)
		если f2=set, {set:f1}
		если f2=get, {get:function(){return f1;}}
		если f2=что-то-другое, {get:f1}
		 **/

		switch (f2) {
		case "setget":
			return EX(f1, !!1);
		case "set":
			return {
				set: fl
			};
		case "get":
			return {
				get: function () {
					return f1;
				}
			};
		default:
			return {
				get: f1
			}
		}
	};
	Object.defineProperties(Object.prototype, {
		Ainit: {
			/**конструктор объектов.
			принимает объект и помещает его свойства в тот, на котором вызван Init.
			если объект содержит конструкции типа l:{set:...,get:...}(только как прямые потомки), то они будут использованы как get l или set l (isEnumerable,isConfigurable,isWritable).
			если свойство __isParam__ установлено в false l:{__isParam__:false}, то все свойства будут приниматься НЕ как параметры свойствa l (enumerable,configurable,writable,get,set)
			также get и set можно создать, используя имя самой функции l:function get(){}-
			get - создаст get с обёрткой
			l:{
			get:function (){
			return get(){};
			}
			} - функция не будет выполняться сама
			set - создаст set
			setget - создаст set и get для одной функции
			auto- создаст get без обёртки функции(она выполнится сама при вызове get)
			 **/
			enumerable: false,
			configurable: false,
			writable: true,
			value: function (vl) {
				var tmp = {};
				for (var nm in vl) {
					var s = vl[nm] || {},
					isp = s.__isParam__,
					sn = s.name || "";
					delete s.__isParam__;
					tmp[nm] = (s.set === undefined && s.get === undefined && s.enumerable === undefined && s.configurable === undefined && s.writable === undefined && ["get", "auto", "setget", "set"].indexOf(sn) === -1 && isp !== true) || isp === false ? {
						enumerable: false,
						configurable: true,
						writable: true,
						value: vl[nm]
					}
					 : (s.constructor !== Function ? s : EX.auto(s, sn));
				}
				Object.defineProperties(this, tmp);
			}
		}
	});
	var cp, //cursor position
	whp = {}, //width, height, position, css position, this
	dsp,
	gtc, //styles
	rect, 
	win,
	sensor = !!("ontouchmove" in document), //проверка на сенсор
	newElem = function (attrs, statics) { //используется вместо class для создания элементов
		function felement() {
			return Reflect.construct(HTMLElement, [], felement);
		}
		Object.setPrototypeOf(felement.prototype, HTMLElement.prototype);
		Object.setPrototypeOf(felement, HTMLElement);

		felement.prototype.Ainit(attrs);
		felement.Ainit(statics);

		return felement;
	},
	offset = {},
	getProps = function (th) {
    offset = th.getBoundingClientRect();
		gtc = getComputedStyle(th);
		return {
			w: parseFloat(gtc.width),
			h: parseFloat(gtc.height),
			p: {top:offset.top,left:offset.left},
			f: gtc.position === "fixed",
			e: th
		};
	};
	window.elems = []; //все элементы подсветки
	!sensor && document.addEventListener("mousemove", function (e) {
		cp = {
			t: event.clientY,
			l: event.clientX
		};
		elems.forEach(function (th) {
			whp = getProps(th[0]);
			whp.b = getProps(th[1]);
			dsp = {
				l: whp.e.getAttribute("b-left-despos"),
				t: whp.e.getAttribute("b-top-despos")
			};
			dsp.t ? (
				dsp.t = Function("it,cursor", "return " + dsp.t)(whp, cp)) : (
				dsp.t = cp.t - whp.b.h / 2 - whp.p.top //выравнивание центра элемента
			);

			dsp.l ? (
				dsp.l = Function("it,cursor", "return " + dsp.l)(whp, cp)) : (
				dsp.l = cp.l - whp.b.w / 2 - whp.p.left);

			whp.b.e.style.left = dsp.l + "px";
			whp.b.e.style.top = dsp.t + "px";
		});
	});
	customElements.define("f-dplane", newElem({
			connectedCallback: function () {
				if (sensor) {
					this.setAttribute("sensor", "");
					return;
				}
				var back = document.createElement("div");
				back.setAttribute("b", "");
				back.style.top = "200%";
				back.style.left = "200%";
				this.appendChild(back);
				elems.push([this, back]);
			},
			disconnectedCallback: function () {
				var elem,
				th = this;
				elems.forEach(function (el, ind) {
					if (el[0] === th) {
						elem = ind;
					}
				});
				elems.splice(elem, 1);
			}
		}));
})();
/*f-dplane default*/
f-dplane:not([sensor]){
	cursor:default;
	display:flex;
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden;
}
f-dplane:not([sensor]) div{
	position:absolute;
	background:radial-gradient(rgba(255, 255, 255, 0.13),transparent,transparent) no-repeat;
	height:100px;
	width:100px;
}

/*other*/
.gg{
  width:400px;
  height:50px;
  outline:none;
  border:none;
  background:black;
  position:relative;
  padding:0;
  color:white;
}
.gg > f-dplane {
  top:0;
}
.gg > f-dplane > [b] {
  width:400px;
  height:200px;
}
<button class="gg">
  <f-dplane></f-dplane>
  asdasdasd
</button>
<br>
<br>
<button class="gg">
  <f-dplane></f-dplane>
  asdasdasd
</button>
<br>
<br>
<button class="gg">
  <f-dplane></f-dplane>
  asdasdasd
</button>
<br>
<br>
<button class="gg">
  <f-dplane></f-dplane>
  asdasdasd
</button>

Количество кода на js можно уменьшить почти в 2 раза, если использовать class:

(function () {
	"use strict";
	var cp, //cursor position
	whp = {}, //width, height, position, css position, this
	dsp,
	gtc, //styles
	rect,
	win,
	sensor = !!("ontouchmove" in document), //проверка на сенсор
	offset = {},
	getProps = function (th) {
    offset = th.getBoundingClientRect();
		gtc = getComputedStyle(th);
		return {
			w: parseFloat(gtc.width),
			h: parseFloat(gtc.height),
			p: {top:offset.top,left:offset.left},
			f: gtc.position === "fixed",
			e: th
		};
	};
	window.elems = []; //все элементы подсветки
	!sensor && document.addEventListener("mousemove", function (e) {
		cp = {
			t: event.clientY,
			l: event.clientX
		};
		elems.forEach(function (th) {
			whp = getProps(th[0]);
			whp.b = getProps(th[1]);
			dsp = {
				l: whp.e.getAttribute("b-left-despos"),
				t: whp.e.getAttribute("b-top-despos")
			};
			dsp.t ? (
				dsp.t = Function("it,cursor", "return " + dsp.t)(whp, cp)) : (
				dsp.t = cp.t - whp.b.h / 2 - whp.p.top //выравнивание центра элемента
			);

			dsp.l ? (
				dsp.l = Function("it,cursor", "return " + dsp.l)(whp, cp)) : (
				dsp.l = cp.l - whp.b.w / 2 - whp.p.left);

			whp.b.e.style.left = dsp.l + "px";
			whp.b.e.style.top = dsp.t + "px";
		});
	});
	class fdplane extends HTMLElement{
		connectedCallback() {
			if (sensor) {
				this.setAttribute("sensor", "");
				return;
			}
			var back = document.createElement("div");
			back.setAttribute("b", "");
			back.style.top = "200%";
			back.style.left = "200%";
			this.appendChild(back);
			elems.push([this, back]);
		}
		disconnectedCallback() {
			var elem,
			th = this;
			elems.forEach(function (el, ind) {
				if (el[0] === th) {
					elem = ind;
				}
			});
			elems.splice(elem, 1);
		}
	}
	customElements.define("f-dplane", fdplane);
})();
/*f-dplane default*/
f-dplane:not([sensor]){
	cursor:default;
	display:flex;
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden;
}
f-dplane:not([sensor]) div{
	position:absolute;
	background:radial-gradient(rgba(255, 255, 255, 0.13),transparent,transparent) no-repeat;
	height:100px;
	width:100px;
}

/*other*/
.gg{
  width:400px;
  height:50px;
  outline:none;
  border:none;
  background:black;
  position:relative;
  padding:0;
  color:white;
}
.gg > f-dplane {
  top:0;
}
.gg > f-dplane > [b] {
  width:400px;
  height:200px;
}
<button class="gg">
  <f-dplane></f-dplane>
  asdasdasd
</button>
<br>
<br>
<button class="gg">
  <f-dplane></f-dplane>
  asdasdasd
</button>
<br>
<br>
<button class="gg">
  <f-dplane></f-dplane>
  asdasdasd
</button>
<br>
<br>
<button class="gg">
  <f-dplane></f-dplane>
  asdasdasd
</button>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.