如何在锚标签 hover 上缩放我的自定义 cursor
[英]How to scale my custom cursor on anchor tag hover
问题描述
I created a custom cursor with html, css and js.
我用 html、css 和 js 创建了一个自定义 cursor。 And i want the cursor to scale up its normal width whenever i hover on any <a></a> element on my web page.我希望 cursor 在我的 web 页面上的任何<a></a>元素上的 hover 时扩大其正常宽度。 Can anyone please give a quick hint on how to go with it任何人都可以快速提示如何使用它 go
Below is the html, css and js下面是html、css和js
HTML HTML
<div class="cursor-custom"></div>
CSS CSS
.cursor-custom {
width: 20px;
height: 20px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid rgba(0, 0, 0, 0.781);
// background-color: rgba(0, 0, 0, 0.877);
border-radius: 50%;
// z-index: 2;
transition-duration: 150ms;
transition-timing-function: ease-out;
}```
JS
```$("* a").hover(function(){
$("cursor-custom").css({
"width" : "40px;",
"height" : "40px;"
});
})
i tried using javascript hover state to change the size of the custom cursor but it did'nt work我尝试使用 javascript hover state 来更改自定义 Z1791A97A8403730EE0760489A2AEB 的大小。
3 个解决方案
解决方案1
1 2021-04-10 13:49:40
There's nothing in the spec which allows you to change the size of a loaded custom cursor.规范中没有任何内容允许您更改加载的自定义 cursor 的大小。
Instead, you could make another copy of your cursor's image file, resize it in your image editor, and then swap the cursor file used when you hover over the link, eg相反，您可以制作光标图像文件的另一个副本，在图像编辑器中调整其大小，然后通过链接交换 hover 时使用的 cursor 文件，例如
body {
cursor: url("cursor.png");
}
a {
cursor: url("cursor-big.png");
}
Since OP has now clarified their cursor is handled via JS instead of CSS, the problem changes a little.由于 OP 现在已经澄清了他们的 cursor 是通过 JS 而不是 CSS 处理的，因此问题发生了一些变化。
The main thing is figuring out "are we hovering an <a> tag".主要是弄清楚“我们是否悬停了<a>标签”。 We can find this out thanks to the Event.composedPath() method, which gives as an array containing the full top-down HTML structure of the element which is being hovered over.我们可以通过Event.composedPath()方法找到这一点，该方法以数组的形式给出，其中包含被悬停的元素的完整自上而下的 HTML 结构。
Here's an example:这是一个例子：
let cursor = document.getElementById("cursor"); let size; document.body.addEventListener("mousemove", (ev)=>{ let path = ev.composedPath(); if (path.some(x=>x.tagName == "A")) size = 20; else size = 10; cursor.style.left = (ev.clientX - size/2) + "px"; cursor.style.top = (ev.clientY - size/2) + "px"; cursor.style.width = size + "px"; cursor.style.height = size + "px"; });
body, html { height: 100%; box-sizing: border-box; } * { cursor: none; } #cursor { position: fixed; background-color: #03A9F4; pointer-events: none; border-radius: 50%; transition: width 0.2s linear, height 0.2s linear; }
<div id="cursor"></div> <h1>My article</h1> <p>Some amazing content, and a <a href="https://www.google.com">link</a>!</p>
解决方案2
0 2021-04-11 09:26:03
An image being used for a CSS cursor has limits on its size.用于 CSS cursor 的图像对其大小有限制。 These limits vary as between browsers and the recommendation on MDN is:这些限制因浏览器而异， MDN上的建议是：
In Gecko (Firefox) the limit of the cursor size is 128×128px.
Larger cursor images are ignored.
However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.
So it is not possible to use an image for the cursor and just make it bigger (eg by using a bigger version of the same image from a file).因此，不可能为 cursor 使用图像并使其更大（例如，通过使用文件中相同图像的更大版本）。
The question talks of using an image for the cursor but gives CSS styling for it so I assume that it has a 'normal' cursor plus an element that follows the cursor through the use of JS. The question talks of using an image for the cursor but gives CSS styling for it so I assume that it has a 'normal' cursor plus an element that follows the cursor through the use of JS. It is reasonable therefore that JS be used to test whether the cursor is over an anchor element and if so to change the size of the element that is following the cursor, as discussed in the answer given by @toastrackenigma.因此，使用 JS 测试 cursor 是否超过锚元素是合理的，如果是，则更改 cursor 之后的元素的大小，如@toastrackenigma 给出的答案中所述。
However, now we have seen the site that has an example of what is required (malvah.co) it is possible to go quite a way to emulate this using just CSS.但是，现在我们已经看到有一个示例的站点（malvah.co），可以使用 go 来模拟这种情况，仅使用 CSS。
Anchor tags are styled to have an after pseudo element on hover which calculates a suitable diameter for a circle depending on the length of the text being hovered (and a maximum so the circle doesn't swamp the whole page.) and centers it on that text.锚标签的样式设置为在 hover 上具有 after 伪元素，该元素根据悬停的文本的长度计算圆的合适直径（以及最大值，因此圆不会淹没整个页面。）并将其居中文本。
In this snippet he cursor is replaced with an image of a circle when not in this hover situation, but of course existing code for having a circle track the normal cursor could be used.在此片段中，当不在此 hover 情况下时，他的 cursor 被替换为圆形图像，但当然可以使用现有的用于具有圆形轨道的代码 cursor。
Note: to see the effect of varying circle size run snippet in full page.注意：在整页中查看不同圆圈大小运行片段的效果。
<:doctype html> <html> <head> <title>Circle cursor</title> <style> * { margin; 0: padding; 0: box-sizing; border-box: cursor: url(https.//ahweb.org.uk/circle,png); auto: } a { position; relative: cursor; pointer: text-align; center: margin; 2vmin: top; 50vh: } a:hover::after { --maxr; 15vmin: /* the maximum radius you will allow the circle to be on hover */ position; absolute: top. calc(-1 * (var(--maxr) * 0;9)): left; -1em: background-image, radial-gradient(circle closest-side, transparent 0%, transparent 90%, rgba(0, 0, 0. 0,781) 90%, rgba(0, 0, 0. 0,781) calc(90% + 3px); transparent calc(90% + 3px)): content; '': width; calc(100% + 2em): height; calc(var(--maxr) * 2): transform; scale(0): animation; expand 150ms ease-out forwards: } @keyframes expand { 0% { transform; scale(0): } 100% { transform; scale(1): } } </style> </head> <body> <a href="#">hover here</a> <a href="#">hover here on a longer text</a> <a href="#">hover here on a much much longer text</a> </body> <.--https://stackoverflow.com/questions/67034999/how-to-scale-my-custom-cursor-on-anchor-tag-hover from: --> </html>
解决方案3
0 2021-04-12 16:08:39
I have managed to pull through with regular jquery mouseover and mouseleave method, Below i what I did我已经设法通过常规的 jquery mouseover和mouseleave方法完成了，下面是我所做的
JS JS
$(".cursor-custom").addClass("hovered");
});
$("a").mouseleave(function () {
$(".cursor-custom").removeClass("hovered");
});
CSS CSS
.cursor-custom {
width: 20px;
height: 20px;
position: fixed;
pointer-events: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid rgba(0, 0, 0, 0.781);
// background-color: rgba(0, 0, 0, 0.877);
border-radius: 50%;
z-index: 2;
transition-duration: 150ms;
transition-timing-function: ease-out;
transition: transform 0.2s ease-in-out;
}
.hovered {
transform: scale(5);
transition: transform 0.2s ease-in-out;
opacity: 0.2;
border: 1px solid gray;
// color: red;
}
Using the mouseover and mouseleave method, i was able to detect the hover state of any <a></a> element on my webpage, then a added a class to the custom-cursor element i wanted to scale up with addClass method.使用mouseover和mouseleave方法，我能够检测到我网页上任何<a></a>元素的 hover state，然后添加了一个addClass到我想要的自定义方法中的元素。 Thanks guys for all your support.感谢大家的支持。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.