【发布时间】：2020-05-04 08:58:43
【问题描述】：
我遇到了一个关于简单悬停效果的棘手问题。我有某些图像（圆形，.png 类型，透明背景） - 当用户将鼠标悬停在任何图像上时，它的颜色应该会改变（在这种情况下，我隐藏当前图像并显示其不同颜色的副本, 使用 jquery .on(hover))。
但是，悬停效果很有趣：有时会滞后（起飞前需要几秒钟/或者当从某个角落接近图像时，悬停有效，但从另一个角度接近时却没有。我不知道'没有应用任何转换延迟。
您可以在此处查看：/url 已删除/
您会注意到一张图片，最小的一张，里面有一盏灯，特别慢/有问题。
所以我想知道是否有办法检查触发悬停的网页的“像素”，看看它是否是由图像类型/位置/等引起的...我怀疑的另一件事是缩放影响悬停（我通过 css 将整个容器缩小到 0.8）。
非常感谢任何帮助。
如果需要，这里是html：
<div class="container-wrapper">
<div class="our-values-container">
<img src="/wp-content/uploads/2020/01/black-circle1.png" class="vimg1 hideblack">
<img src="/wp-content/uploads/2020/01/grey-circle2.png" class="vimg2 grey">
<img src="/wp-content/uploads/2020/01/grey-circle3.png" class="vimg3 grey">
<img src="/wp-content/uploads/2020/01/grey-circle4.png" class="vimg4 grey">
<img src="/wp-content/uploads/2020/01/grey-circle5.png" class="vimg5 grey">
<img src="/wp-content/uploads/2020/01/grey-circle6.png" class="vimg6 grey">
<!------------------------------------------->
<img src="/wp-content/uploads/2020/01/grey-circle1.png" class="vimg1 grey">
<img src="/wp-content/uploads/2020/01/black-circle2.png" class="vimg2 hideblack">
<img src="/wp-content/uploads/2020/01/black-circle3.png" class="vimg3 hideblack">
<img src="/wp-content/uploads/2020/01/black-circle4.png" class="vimg4 hideblack">
<img src="/wp-content/uploads/2020/01/black-circle5.png" class="vimg5 hideblack">
<img src="/wp-content/uploads/2020/01/black-circle6.png" class="vimg6 hideblack">
<!-------------------------------------------->
<img src="/wp-content/uploads/2020/01/text-box1.png" class="txt1 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box2-grey.png" class="txt2 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box3-real-grey.png" class="txt3 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box3-grey.png" class="txt4 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box5-grey.png" class="txt5 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box6-grey.png" class="txt6 txtgrey">
</div>
</div>
这是css的主要部分：
.our-values-container img{
position: absolute;
}
img.vimg1{
top: 150px;
left: -12px;
height: 123px;
}
img.vimg2{
top: 225px;
left: 97px;
height: 130px;
}
//the rest of the images are position in a similar manner
img.txtgrey{
height: 280px;
}
img.hideblack{
display: none;
}
img.grey.vimg1{
display: none;
}
img.hideblack.vimg1{
display: block;
}
.container-wrapper{
transform: scale(0.8, 0.8); //the initial size was slightly bigger than needed
//and I realized this after I positioned everything, so I resolved to
//scale it down.
}
javascript函数：
function ourValues_page() {
if ($(window).width() > 960) {
$(".vimg1.grey").hover(function () {
makeAllGrey2();
$(".vimg1.grey").hide();
$(".vimg1.hideblack").show();
$(".txt1").attr("src", "/wp-content/uploads/2020/01/text-box1.png");
}, function () {});
$(".vimg2.grey").hover(function () {
makeAllGrey2();
$(".vimg2.grey").hide();
$(".vimg2.hideblack").show();
$(".txt2").attr("src", "/wp-content/uploads/2020/01/text-box2.png");
}, function () {
});
$(".vimg3.grey").hover(function () {
makeAllGrey2();
$(".vimg3.grey").hide();
$(".vimg3.hideblack").show();
$(".txt3").attr("src", "/wp-content/uploads/2020/01/text-box3-real.png");
}, function () {});
$(".vimg4.grey").hover(function () {
makeAllGrey2();
$(".vimg4.grey").hide();
$(".vimg4.hideblack").show();
$(".txt4").attr("src", "/wp-content/uploads/2020/01/text-box3.png");
}, function () {});
$(".vimg5.grey").hover(function () {
makeAllGrey2();
$(".vimg5.grey").hide();
$(".vimg5.hideblack").show();
$(".txt5").attr("src", "/wp-content/uploads/2020/01/text-box5.png");
}, function () {});
$(".vimg6.grey").hover(function () {
makeAllGrey2();
$(".vimg6.grey").hide();
$(".vimg6.hideblack").show();
$(".txt6").attr("src", "/wp-content/uploads/2020/01/text-box6.png");
}, function () {
});
}
function makeAllGrey2() {
$(".our-values-page .hideblack").hide();
$(".our-values-page .grey").show();
$(".txt1.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box1-grey.png");
$(".txt2.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box2-grey.png");
$(".txt3.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box3-real-grey.png");
$(".txt4.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box3-grey.png");
$(".txt5.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box5-grey.png");
$(".txt6.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box6-grey.png");
}
}
【问题讨论】：
标签： javascript jquery css hover jquery-hover