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:检查触发悬停效果的图像像素的主要内容,如果未能解决你的问题,请参考以下文章

仅对字母(而非容器)的悬停效果

子控件的 WPF 鼠标悬停触发效果

悬停时如何在图像上添加具有多重混合模式的图层?

从另一个小部件触发检查按钮悬停事件

在 Google 地图中的地图图块上触发悬停

谷歌geojsonlayer多边形与悬停效果使用Android