移除移动设备上的悬停效果并显示标题

Question

我整晚都在寻找这个问题的答案。我正在一个网站上工作并尝试修改悬停效果的行为。我不确定哪个 .js 文件正在创建效果以及我应该如何修改它们。

基本上，我在主页上有一个网格布局，当您将鼠标悬停在图像上时，它会显示标题和深色叠加层。标题上也有一点动画。

我需要添加一个媒体查询以在移动设备上阻止它，并使块的标题出现在页面加载时。您可以通过访问该网站了解我的意思。

网站在这里：theshoemaven(dot)com

我知道你可以使用

var mq = window.matchMedia('@media all and (max-width: 700px)');

在 javascript 中创建媒体查询。但我不确定在哪里应用它，以及如何确保每个框上的标题出现在页面加载中。

非常感谢您对此提供的任何帮助。谢谢！

** 更新 **

我找到了以下调用投资组合网格的函数。如果我能让它在加载时显示标题（不仅仅是悬停），我的状态会很好。不幸的是，PHP 不是我最喜欢的语言。 :)

 /*---------------------------------------*/
            /*  Output Starts
            /*---------------------------------------*/


            // Start container
            echo '<div class="'.$container.' cap-wrap">';

                // If hover
                if($hover==true) {

                    echo '<div class="hover-wrap">';


                        // If lightbox
                        if($link=='lightbox') {


                            echo '<a rel="gallery-'.$postid.'" href="'.$full[0].'" title="'.$image_cap.'" class="swipebox">';

                            echo vk_hover('lightbox');

                            echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>';

                            echo '</a>';


                        // If post
                        } else {

                            echo '<a href="'.$post_link.'" title="'.$post_title.'">';

                            echo vk_hover('link');

                            echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>';

                            echo '</a>';

                        }


                    echo '</div>';


                // If no hover
                } else {

                    echo '<img src="'.$src[0].'" alt="'.$image_alt.'"/>';

                }

                // The Caption
                if($caption==true && $image_cap!='') {

                    echo '<div class="caption no-link no-dec"><p>'.$image_cap.'</p></div>';

                }

            // End container
            echo '</div>';


        } // end foreach

    } // end if attachments

} // end function

Answer 1

matchMedia API 有其用途：它非常适合使用 addListener 让您知道媒体查询何时切换。在我看来，它可能不应该在这里使用。

我注意到页面的正文有以下类：“noTablet”、“noMobile”，所以当我模拟 iphone 时，果然“noMobile”变成了“mobile”。

我本来建议使用 body.noMobile 选择器实现 100% css 修复，但看起来您首先使用了大量的 javascript 来实现效果，即设置内联样式，所以。 ..

查看您的 javascript，我发现以下压缩代码：

s(".hover > div").css("opacity", "0"), s(".hover").hover(function() {
        s(this).children("div").addClass("fadeUpIcon").animate({opacity: "1"}, 100)
    }, function() {
        s(this).children("div").css("opacity", "0").removeClass("fadeUpIcon")

如果您将所有选择器切换到 body.noMobile 前面，例如：$('body.noMobile .hover > div') 您可能会消除所有移动设备的“覆盖”。

然后您可以使用简单的（尽管您的选择器可能必须更具体）CSS，例如：

body.mobile .hover {

}

为移动设备设计样式。

这可能对你有用，但我强烈认为你应该尝试预算时间来删除控制它的 javascript，并简单地使用 :hover 伪选择器以及变换和转换来达到相同的效果。如果您真的想使用媒体查询而不是您当前使用的任何移动检测，那么这些也可以轻松进入 CSS。