Question

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

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

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

网站在这里：theshoemaven（dot）com

我知道你可以使用

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

在javascript中创建媒体查询。但我不知道在哪里应用它，以及如何确保每个方框的标题出现在pageload上。

我非常感谢任何帮助。谢谢！

**更新**

我找到了以下调用投资组合网格的函数。如果我可以让它在负载上显示标题（不仅仅是悬停），我将会很好。不幸的是，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”变成了“移动”。

我打算建议使用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")

如果您要将所有选择器切换为prepend body.noMobile，请执行以下操作：$('body.noMobile .hover > div')您可能会删除所有移动设备的“叠加层”。

然后你可以使用简单的（虽然你的选择器可能必须更具体）CSS如：

body.mobile .hover {

}

为移动设计样式。

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

删除手机上的悬停效果并显示标题

1 个答案: