悬停图像跟随鼠标移动
Hover Image follow mouse on move
我正在尝试用鼠标移动悬停图像。
我找到了很多资源,但由于我使用的是 Wordpress 主题,我无法编辑 HTML 因此我尝试使用伪元素(尽管不一定非得如此)来显示悬停时的图像。是否可以在鼠标移动时移动伪元素?
否则我可以使用 JS 添加随鼠标悬停移动的图像吗?
我已经在使用一些 JS 来更改悬停时整个部分的背景颜色,所以也许我可以加入它?
这是带有 'toolkits' 手风琴的 URL,您可以在其中看到我的小伪缩略图,尽管我希望它出现在鼠标旁边并随鼠标一起移动,直到用户已离开面板。
如果有帮助,我用于切换颜色的 js 是:
$(".colour-switching-section .panel-group .panel:first-child").mouseover(function(){
$(".colour-switching-section").addClass("colour-switch-1");
});
$(".colour-switching-section .panel-group .panel:first-child").mouseleave(function(){
$(".colour-switching-section").removeClass("colour-switch-1");
});
还有我的CSS
.colour-switch-1 {
background-color: #6B9FD5 !important;
transition: background-color ease-in-out .2s;
}
.colour-switch-1::before {
content: "";
width: 100px;
background-image: url('https://www.website.com/wp-content/uploads/2019/10/Contact.png');
background-size: cover;
height: 200px;
position: absolute;
}
好吧,最后我让这个完美地工作了——尽管如果有一个更好的解决方案,那就太好了。
HTML
<div class="hover-image">
</div>
CSS
.hover-image {
width: 300px;
height: 170px;
background-size: cover;
}
.hover-image.appear-1 {
background-image:url('image-url');
}
.hover-image.appear-2 {
background-image:url('image-url');
}
.hover-image.appear-3 {
background-image:url('image-url');
}
JS
$(".colour-switching-section .panel-group .panel:first-child").mouseover(function(){
$(".hover-image").addClass("appear-1");
});
$(".colour-switching-section .panel-group .panel:first-child").mouseleave(function(){
$(".hover-image").removeClass("appear-1");
});
$(".colour-switching-section .panel-group .panel:nth-child(2)").mouseover(function(){
$(".hover-image").addClass("appear-2");
});
$(".colour-switching-section .panel-group .panel:nth-child(2)").mouseleave(function(){
$(".hover-image").removeClass("appear-2");
});
$(".colour-switching-section .panel-group .panel:nth-child(3)").mouseover(function(){
$(".hover-image").addClass("appear-3");
});
$(".colour-switching-section .panel-group .panel:nth-child(3)").mouseleave(function(){
$(".hover-image").removeClass("appear-3");
});
我正在尝试用鼠标移动悬停图像。
我找到了很多资源,但由于我使用的是 Wordpress 主题,我无法编辑 HTML 因此我尝试使用伪元素(尽管不一定非得如此)来显示悬停时的图像。是否可以在鼠标移动时移动伪元素?
否则我可以使用 JS 添加随鼠标悬停移动的图像吗?
我已经在使用一些 JS 来更改悬停时整个部分的背景颜色,所以也许我可以加入它?
这是带有 'toolkits' 手风琴的 URL,您可以在其中看到我的小伪缩略图,尽管我希望它出现在鼠标旁边并随鼠标一起移动,直到用户已离开面板。
如果有帮助,我用于切换颜色的 js 是:
$(".colour-switching-section .panel-group .panel:first-child").mouseover(function(){
$(".colour-switching-section").addClass("colour-switch-1");
});
$(".colour-switching-section .panel-group .panel:first-child").mouseleave(function(){
$(".colour-switching-section").removeClass("colour-switch-1");
});
还有我的CSS
.colour-switch-1 {
background-color: #6B9FD5 !important;
transition: background-color ease-in-out .2s;
}
.colour-switch-1::before {
content: "";
width: 100px;
background-image: url('https://www.website.com/wp-content/uploads/2019/10/Contact.png');
background-size: cover;
height: 200px;
position: absolute;
}
好吧,最后我让这个完美地工作了——尽管如果有一个更好的解决方案,那就太好了。
HTML
<div class="hover-image">
</div>
CSS
.hover-image {
width: 300px;
height: 170px;
background-size: cover;
}
.hover-image.appear-1 {
background-image:url('image-url');
}
.hover-image.appear-2 {
background-image:url('image-url');
}
.hover-image.appear-3 {
background-image:url('image-url');
}
JS
$(".colour-switching-section .panel-group .panel:first-child").mouseover(function(){
$(".hover-image").addClass("appear-1");
});
$(".colour-switching-section .panel-group .panel:first-child").mouseleave(function(){
$(".hover-image").removeClass("appear-1");
});
$(".colour-switching-section .panel-group .panel:nth-child(2)").mouseover(function(){
$(".hover-image").addClass("appear-2");
});
$(".colour-switching-section .panel-group .panel:nth-child(2)").mouseleave(function(){
$(".hover-image").removeClass("appear-2");
});
$(".colour-switching-section .panel-group .panel:nth-child(3)").mouseover(function(){
$(".hover-image").addClass("appear-3");
});
$(".colour-switching-section .panel-group .panel:nth-child(3)").mouseleave(function(){
$(".hover-image").removeClass("appear-3");
});