关于简单的悬停效果,我遇到了一个棘手的问题。我有某些图像(圆形,.png类型,透明背景)-当用户将鼠标悬停在任何图像上时,其颜色应该会发生变化(在这种情况下,我正在隐藏当前图像并显示其不同颜色的副本,使用jquery .on(hover))。
但是,悬停效果表现得很有趣:有时会滞后(起飞前需要几秒钟//或者从某个角落接近图像时,悬停有效,但是从另一个角落接近时则无效。我不会没有应用任何转换延迟。
您可以在这里看到它:https://grenoblepartners.com/about-us/our-values/
您会注意到一幅图像,其中最小的一幅图像带有灯,特别慢/有问题。
所以我想知道是否有一种方法可以检查触发悬停的网页的“像素”,以查看是否是由图像类型/位置/等引起的。我怀疑的另一件事是缩放正在影响悬停(我已将整个容器通过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");
}
}