javascript - jQuery mouseover 在文档上无法按预期工作
问题描述
我想让我自己的光标只显示在特定类别的特定图像上。
我已经为此写了几行。
这是我的代码:
function registerCursorHoverEffect() {
if (!isTouch()) {
const el = document.body;
var cursorDiv = document.createElement("div");
cursorDiv.setAttribute("id", "cursor");
cursorDiv.setAttribute("class", "light-spot light-spot--cursor light-spot--center-center light-spot--color-red light-spot--filled light-spot--outside");
el.before(cursorDiv);
document.getElementById("cursor").innerHTML = '<svg class="cursor-main" xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewport="0 0 100 100" style="stroke: white; fill:white;font-size:300px; z-index: 9999999;position: absolute; top: 40px; right: 40px; bottom: 0;"><path d="M59.71,31.29l-10-10a1,1,0,0,0-1.42,1.42L56.59,31H5a1,1,0,0,0,0,2H56.59l-8.3,8.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l10-10A1,1,0,0,0,59.71,31.29Z"/></svg>';
var cursorDivAppend = document.createElement("div");
cursorDivAppend.setAttribute("id", "cursor-append");
cursorDivAppend.setAttribute("class", "cursor-append");
el.before(cursorDivAppend);
// Mousemove
$(document).on('mousemove', function (event) {
if($('.col-3:hover').length != 0) {
const appendScale = 1
var destinationX = event.pageX;
var destinationY = event.pageY;
var transformScale = `translate(calc(${destinationX}px - 50%), calc(${destinationY}px - 50%)) scale(${appendScale})`
$('#cursor').css('transform', transformScale);
}
})
}
}
以下屏幕截图显示了当您将鼠标悬停在具有特定类的图像上时生成的内容:
这一切的关键部分在这里:
// Mousemove
$(document).on('mousemove', function (event) {
if($('.col-3:hover').length != 0) {
const appendScale = 1
var destinationX = event.pageX;
var destinationY = event.pageY;
var transformScale = `translate(calc(${destinationX}px - 50%), calc(${destinationY}px - 50%)) scale(${appendScale})`
$('#cursor').css('transform', transformScale);
}
})
event.pageX
应该总是给我当前鼠标位置$(document)
而不是事件本身。完全一样event.pageY
。但我总是得到事件的当前位置,我不知道为什么。
有人可以帮我吗?
更新:
但是,光标元素的宽度阻碍了我,因为我得到了$ (documents)
. 仅当我在光标外时才会触发该事件。这是一个屏幕截图并澄清问题:
解决方案
我想让我自己的光标只显示在特定类别的特定图像上。
你只能用 css 做到这一点,
.cursors {
display: flex;
justify-content: flex-start;
align-items: stretch;
height: 100vh;
}
.cursors > div {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
box-sizing: border-box;
padding: 10px 2px;
text-align: center;
}
.cursors > div:nth-child(odd) {
background: #eee;
}
.cursors > div:hover {
opacity: 0.25;
}
.png {
cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.png"), auto;
}
.gif {
cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
}
.rotated {
transform: rotate(45deg); /* Equal to rotateZ(45deg) */
background-color: pink;
}
<div class="cursors">
<div><img class="png rotated"src="https://uxwing.com/wp-content/themes/uxwing/images/patreon_btn.png"/> </div>
<div class="gif">GIF</div>
</div>
推荐阅读
- keystore - 证书、钱包创建和导入证书
- recommendation-engine - 如何在隐式 als 中设置特定产品的优先级?
- javascript - 傀儡师。现有页面转到链接比创建新页面慢?
- linkedin - 有没有办法在使用linkedin share api共享内容时添加标题和描述?
- mysql - 按版本分组并按行显示
- image - Photoshop CC2019 自动更新所有链接的智能对象,包括嵌套的对象
- git - 如何从功能分支中删除旧提交?
- ios - 如何从 Socket.io On Function 执行 UI 操作
- android - 问题“条目名称'META-INF ...'碰撞 - Android
- linux - 如何在第一次匹配字符串之前剪切和保存所有内容?