Question

我正在尝试运行一个脚本，当鼠标悬停在我的徽标上时会显示一条消息。我只想让它在大于768.e.g的屏幕尺寸上运行而不是手机。 div将出现并显示列表中的随机消息。

在调整大小时，我检查我的内容容器是否等于或大于692，如果是，我将一个类hoverInfo添加到正文。我只想运行脚本，如果这个类存在，但脚本仍然运行，无论如何。

目前我在doc.ready上运行脚本，但是运行脚本来检查窗口调整大小和doc.ready上的宽度。

任何帮助都会非常感激！

$(function(){
    function checkWidth() {
        if ($('#content-wrap').width() == 692) {
            $('body').addClass('hoverinfo');        
        } else {
            $('body').removeClass('hoverinfo');
        }   
    }
    checkWidth();

    $(window).resize(function () {
         setTimeout(checkWidth, 200);
    });

    function showText(){
        $randomText = $(".page #messages");
        $(".hoverinfo #logo").hover(
            function () {   
                $randomText.show();
            },

            function () {
                $randomText.hide();
            }
        );              
    }       
    showText();                 
});

Answer 1

我不认为悬停在jquery中作为直播事件。所以将自己设置并保持页面加载的其余部分。

尝试;

        $(".no-touch .page.hoverinfo #logo").on("mouseenter", function(){
            $randomText.show();
            var aux=hoverText($text);
            $(".page #messages li:eq("+aux+")").show(); 
            $("#logo").css('opacity','1');
        });

        $(".no-touch .page.hoverinfo #logo").on("mouseleave", function(){
            $randomText.hide();
            $text.hide();
            $("#logo").css('opacity','1');
        });

另外，我认为你有一个错字;

if ($('#content-wrap').width() == 692) {

应该是;

if ($('#content-wrap').width() >= 692) {

Answer 2

我的建议是制定一条css规则，规定允许在哪些屏幕尺寸上看到该消息。也许将文本内容包装在div中，如此

<div class="showOnLrg">
<h3 id="randomText" style="display:none;"></h3>
</div>

然后在你的样式表中有一个带有媒体查询的规则

.showOnLrg{display:none;}
@media screen and( min-width : 768px){
.showOnLrg{display:block;}
}

通过这种方式，您可以使用悬停功能上的jquery隐藏和显示文本，而无需在调整大小功能中检查屏幕分辨率，实际上您不需要调整大小功能。是的，您的悬停功能将触发，但是如果文本的父容器被隐藏，则切换时您将看不到该文本。所以你可以像这样声明你的悬停功能。

$(".hoverinfo #logo").hover(
            function () {   
                $randomText.show();
            },

            function () {
                $randomText.hide();
            });

如果你在调整大小功能中设置它，你不应该看窗口大小而不是div大小？

$(window).width();

如果满足条件，则在调整大小时运行jQuery函数

2 个答案: