1

我正在尝试运行一个脚本，当将鼠标悬停在我的徽标上时会显示一条消息。我只希望它在大于 768.eg 的屏幕尺寸上运行，而不是在手机上运行。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();                 
});
4

2 回答 2

0

我的建议是制定一个 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();
            });

如果您打算在 resize 函数中执行此操作，您不应该查看窗口大小而不是 div 大小吗？

$(window).width();
于 2013-05-19T03:12:16.450 回答
0

我不认为悬停作为 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) {
于 2013-05-19T01:10:55.967 回答