QuerySelectorAll не работает с Filepond ⇐ CSS

[Anonymous]

Я создаю сайт, использующий Filepond. Я также пытаюсь реализовать собственный курсор на основе этого codepen. Я хотел бы, чтобы hoverTarget выбирал кнопки действий Filepond и подчеркнутый текст «Обзор», я попробовал поставить:

Код: Выделить всё

hoverTarget: document.querySelectorAll(".filepond--file-action-button")

//кнопка

Код: Выделить всё

hoverTarget: document.querySelectorAll(".filepond--label-action")

//просматриваем текст

для кнопки действия и просматриваем текст как их классы, но он не был выбран querySelectorAll. Я также добавил в функцию теги button и span, но все равно ничего. Обратите внимание, что при создании простых HTML-элементов и test селектор запросов смог их подобрать. Мне также удалось выбрать корневой элемент div для filepond:

Код: Выделить всё

hoverTarget: document.querySelectorAll(".filepond--root")

но по-прежнему не могу выбрать другие элементы div с такими классами, как .filepond--file
Мне интересно, не может ли селектор запросов выбрать элементы, с которыми у меня возникают проблемы, поскольку они динамические, но я не уверен. Я попробовал getElementsByClassName на основе этого ответа, но это не сработало.
РЕДАКТИРОВАТЬ: вот codepen или запустите приведенный ниже фрагмент. (не могу загрузить на него файл), который отражает мою текущую ситуацию! Попробуйте загрузить файл, и мое предполагаемое поведение: курсор нависает над кнопкой так же, как и над кнопкой, а синий текст над синим крестиком, значком загрузки и подчеркнутым обзором после загрузки файла.
Спасибо за помощь!

Код: Выделить всё

FilePond.registerPlugin(
FilePondPluginImageExifOrientation,
FilePondPluginImagePreview,
FilePondPluginPdfPreview,
FilePondPluginMediaPreview,
FilePondPluginGetFile
);

const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create(inputElement, {
allowDownloadByUrl: false,
pdfComponentExtraParams: 'toolbar=0&view=fitW&page=1'
});

function customCursor(options) {
const settings = Object.assign(
{
targetClass: "custom-cursor",
dotClass: "custom-cursor-dot",
wrapper: document.body,
speed: 0.2,
movingDelay: 300,
idleTime: 2000,
hideAfter: 5000,
hasHover: true,
hoverTarget: document.querySelectorAll("button, .testspanclass, .filepond--label-action, .filepond--download-icon, .filepond--file-action-button"),
touchDevices: false,
onMove: function (data) {}
},
options
);

const data = {};
const checkTouch =
!settings.touchDevices && "ontouchstart" in document.documentElement;
let timer = null,
idleTimer = null,
hideTimer = null,
idleAnim = null;

if (checkTouch || !settings.wrapper) return;

const cursor = document.createElement("div");
cursor.className = settings.targetClass;
const dot = document.createElement("div");
dot.className = settings.dotClass;
settings.wrapper.appendChild(cursor);
settings.wrapper.appendChild(dot);

let position = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
let dotPosition = { x: position.x, y: position.y };
const setX = gsap.quickSetter(cursor, "x", "px");
const setY = gsap.quickSetter(cursor, "y", "px");
const setDotX = gsap.quickSetter(dot, "x", "px");
const setDotY = gsap.quickSetter(dot, "y", "px");

data.cursor = cursor;
data.isHover = false;

window.addEventListener("mousemove", init);

function init() {
window.removeEventListener("mousemove", init);

window.addEventListener("mousemove", (e) => {
dotPosition.x = e.clientX;
dotPosition.y = e.clientY;

data.isMoving = true;
settings.onMove(data);

clearTimeout(timer);
clearTimeout(idleTimer);
clearTimeout(hideTimer);

if (idleAnim) {
idleAnim.kill();
idleAnim = null;
gsap.to([cursor, dot], { scale: 1 });
}

idleTimer = setTimeout(() => {
idleAnimation();
}, settings.idleTime);

hideTimer = setTimeout(() => {
gsap.to([cursor, dot], { opacity: 0 });
}, settings.hideAfter);

timer = setTimeout(() => {
data.isMoving = false;
settings.onMove(data);
}, settings.movingDelay);
});

document.addEventListener("mouseleave", () => {
data.isInViewport = false;
settings.onMove(data);
});

document.addEventListener("mouseenter", (e) => {
dotPosition.x = position.x = e.clientX;
dotPosition.y = position.y = e.clientY;

data.isInViewport = true;
settings.onMove(data);
});

gsap.ticker.add((time, deltaTime) => {
const fpms = 60 / 1000;
const delta = deltaTime * fpms;
const dt = 1 - Math.pow(1 - settings.speed, delta);
position.x += (dotPosition.x - position.x) * dt;
position.y += (dotPosition.y - position.y) * dt;
setDotX(dotPosition.x);
setDotY(dotPosition.y);

// custom-cursor, custom-cursor-dot'u takip eder
setX(position.x);
setY(position.y);
});

data.isInViewport = true;
}

function idleAnimation() {
if (!data.isMoving && !data.isHover) {
idleAnim = gsap.to([cursor, dot], {
scale: 1.2,
repeat: -1,
yoyo: true,
duration: 0.5
});
}
}

if (settings.hasHover &&  settings.hoverTarget.length) {
settings.hoverTarget.forEach((target) => {
target.addEventListener("mouseenter", () => {
data.hoverTarget = target;
data.isHover = true;
gsap.to(cursor, { scale: 1.5 });
gsap.to(dot, { scale: 1.5 });
if (idleAnim) {
idleAnim.kill();
idleAnim = null;
}
settings.onMove(data);
});
target.addEventListener("mouseleave", () => {
data.hoverTarget = target;
data.isHover = false;
gsap.to(cursor, { scale: 1 });
gsap.to(dot, { scale: 1 });
settings.onMove(data);
});
});
}
}

customCursor({
targetClass: "custom-cursor",
dotClass: "custom-cursor-dot",
hasHover: true,
idleTime: 2000,
onMove: function (data) {
if (data.isInViewport) {
if (data.isMoving) {
if (data.isHover) {
gsap.to(data.cursor, { opacity: 0.5, scale: 1.5 });
gsap.to(document.querySelector(".custom-cursor-dot"), {
opacity: 0.5,
scale: 1.5,
height: 8,
width: 8,
borderRadius: 50
});
} else {
gsap.to(data.cursor, { opacity: 1, scale: 1 });
gsap.to(document.querySelector(".custom-cursor-dot"), {
opacity: 1,
scale: 1,
height: 8,
width: 8,
borderRadius: 50
});

}
} else {
gsap.to(data.cursor, { opacity: 0.5 });
gsap.to(document.querySelector(".custom-cursor-dot"), { opacity: 0.5 });
}
} else {
gsap.to(data.cursor, { opacity: 0 });
gsap.to(document.querySelector(".custom-cursor-dot"), { opacity: 0 });
}
}
});

Код: Выделить всё

body {
background-color: #D0DFFF;
animation: fadeInAnimation ease .5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
}

.row {
padding: 1.5vh;
width: 75vw;
position: relative;
}

.label {
position: absolute;
top: 2rem;
bottom: 0;
left: 2rem;
display: flex;
align-items: normal;
pointer-events: none;
color: #3974F1;
font-size: 0.75rem;
font-family: "Arial";
transform: translate(0, -29px);
background-color: #D0DFFF;
border-radius: 0.438rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
height: 1.25rem;
}

/* Cursor */

html {
cursor: none;
}

button,
span {
cursor: none;  /* Hide the default pointer cursor */
}

.custom-cursor,
.custom-cursor-dot {
position: fixed;
z-index: 999;
top: 0;
left: 0;
transform: translate(-50%, -50%);
pointer-events: none;
}

.custom-cursor {
width: 30px;
height: 30px;
border: 1px solid #76A2FF;
border-radius: 50%;
}

.custom-cursor-dot {
width: 8px;
height: 8px;
border-radius: 50px;
background-color: #3974F1;
}

/* Scrollbar */

::-webkit-scrollbar {
width: 15px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  {
height: 10px;
background-color: ;
}
::-webkit-scrollbar-track-piece  {
background-color: transparent;
-webkit-border-radius: 1rem;
}
::-webkit-scrollbar-thumb:vertical {
height: 10px;
background-color: #76A2FF;
border: 3px solid #D0DFFF;
-webkit-border-radius: 1rem;
}

/* Animations */

@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/* File Input */

.filepond--panel-root {
border: 0.063rem dashed #3974F1;
border-radius: 1rem;
background-color: #D0DFFF;
height: 1em;
}

.filepond--drop-label label {
cursor: none;
color: #3974F1;
}

.filepond--label-action {
cursor: none;
text-decoration-color: #76A2FF;
}

.filepond--item-panel {
background-color: #76A2FF;
}

.filepond--file-action-button {
cursor: none;
background-color: #3974F1;
}

.filepond--root {
max-height: 30vh;
}

.filepond--download-icon {
cursor: none;
height: 25px;
width: 25px;
margin-right: 0.8em;
margin-top: 0.05em;
margin-left: 0.21em;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
}

.filepond--download-icon:hover,
.filepond--magnify-icon:hover {
background: hsla(0, 0%, 100%, 0.5);
}

.filepond--file-info-sub {
margin-top: -1em;
margin-left: 4em;
}

Код: Выделить всё

FILES


Hover Over Me!
You can hover over the blue text.

Подробнее здесь: https://stackoverflow.com/questions/786 ... h-filepond