css/javascript:检查触发悬停效果的图像像素
Posted
技术标签:
【中文标题】css/javascript:检查触发悬停效果的图像像素【英文标题】:css/javascript: checking pixels of image where hover effect is triggered 【发布时间】: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");
【问题讨论】:
【参考方案1】:我不确定这是不是最好的解决方法,但您的问题是某些图像相互重叠,因此您的图标上的悬停无法正常工作。
此图像显示,当我右键单击并检查灯图标时,我实际上将鼠标悬停在协作内容图像上。
如果您将z-index: 2;
放在图标上,它们会与内容图像重叠,因此您至少应该能够使悬停正常工作。
【讨论】:
以上是关于css/javascript:检查触发悬停效果的图像像素的主要内容,如果未能解决你的问题,请参考以下文章