2

我有一个披萨菜单，当用户将光标悬停在其中一个馅饼上时，它会在上面的 div 中显示有关该馅饼的信息。到目前为止我所做的工作，但有一个怪癖。

如果您在 .infotrigger 上移动鼠标过快，则 .iteminfo 对 mouseleave 触发不可见，从而使 .iteminfo 可见，这是不可取的。

你可以在这里玩。

查询：

$(function() {

        $('.infotrigger').mouseenter(function () {
            $(this).children('.iteminfo').show(100);
        });

        $('.iteminfo').mouseleave(function () {
            $(this).fadeOut(200);
        });

    });

我已经搜索了数周的解决方案并且已经接近，但它似乎总是回到我对“这个”触发器的感知需求。我使用了 children 处理程序，因为我对菜单上的每个项目都使用了相同的类。没有它，菜单上每个披萨的信息都会弹出。起初我尝试了一个列表，但似乎无法让它发挥作用。如果有更优雅的方式来解决这个问题，我会全神贯注。我想知道我构建 HTML 的方式是否是我想要实现的最大障碍。

HTML：

<div class="menuitem">
    <div class="infotrigger">
        <div class="iteminfo"></div>
    </div>
</div>

CSS：

.menuitem {
width:144px;
height:200px;
float:left;
position:relative;
display:block;
font-size:1.2em;
letter-spacing:.05em;
margin-left:2em;
z-index:5;
}

.menuitem p {
margin-bottom:0;
}

.menuitem img {
}

.infotrigger {
margin-bottom:-14px;
height:120px;
overflow:visible;
}

.iteminfo {
position:relative;
display:none;

width:238px;
/*height:168px;*/
margin:-140px auto 0 -47px;
text-align:left;
font-size:0.8em;
font-family:Helvetica, Arial, sans-serif;
font-weight:bold;
letter-spacing:0;
color:rgb(110,48,21);
border-right:1px solid rgba(0,0,0,0.2);
border-bottom:1px solid rgba(0,0,0,0.25);
-moz-border-radius:4px;
border-radius:4px;
-moz-box-shadow:1px 1px 10px rgba(0,0,0,0.5);
-webkit-box-shadow:1px 1px 10px rgba(0,0,0,0.5);
box-shadow:1px 1px 32px rgba(0,0,0,0.5);
background-image: linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%);
background-image: -o-linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%);
background-image: -moz-linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%);
background-image: -ms-linear-gradient(bottom, rgb(224,201,174) 0%, rgb(254,245,224) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(224,201,174)),
color-stop(1, rgb(254,245,224))
);
z-index:100;
}

.iteminfo img {
margin:0 0;
width:238px;
height:56px;
}

.iteminfo p {
text-align:left;
margin:0.7em 0.2em 0.5em 0.5em;
}

.fb-like {
margin:0.5em auto 0.5em 0.5em;
}

谢谢你的帮助。这就是尝试 Web 开发的设计师的样子。

4

3 回答 3

0

不确定是否会做很多，但如果不创建备份计划，请尝试添加一些站点：

$('.infotrigger').mouseenter(function () {
    $(this).children('.iteminfo').stop(true, true).show(100);
});

$('.iteminfo').mouseleave(function () {
    $(this).stop(true, true).fadeOut(200);
});

备份计划，不是一个好主意，但尝试将其更改为具有更多本地范围的内容：

$(document).on('mousemove', function(e) {
    if ($(".iteminfo").is(':visible') && e.target.className != 'iteminfo') {
        $(".iteminfo").hide(); //could use a timeout aswell
    }
});

可能最好的解决方案就是这样做：

$('.infotrigger').mouseenter(function () {
    var elm = $(this).children('.iteminfo');
    $('.iteminfo').not(elm).fadeOut(200);
    elm.show(100);
});

$('.iteminfo').mouseleave(function () {
    $(this).fadeOut(200);
});
于 2012-05-06T21:33:35.443 回答
0

如何简单地将hover事件绑定到infotrigger？

$('.infotrigger').hover(function() {
    $(this).children('.iteminfo').show(100);
}, function() {
    $(this).children('.iteminfo').fadeOut(200);
});​

我已经测试过，它工作正常；）

于 2012-05-06T21:35:06.387 回答
0

CSS
为什么不是纯 CSS？http://jsfiddle.net/mqchen/QFJz7/

它只显示悬停时的信息，对于支持 css3 动画的浏览器，信息将淡入。

Javascript
这是一个稍微冗长的老式 javascript 解决方案：http: //jsfiddle.net/mqchen/Sbg7g/3/

无论鼠标离开哪个“披萨”，它基本上都会隐藏所有其他人。查看jsfiddle。您只需要考虑 javascript 部分。

var triggers = $(".infotrigger");
var infos = $(".infotrigger .iteminfo");

$(triggers).each(function(index, trigger) {
    $(trigger).mouseenter(function(e) {
        $(infos).each(function(i2, info) {
            if(index === i2) {
                $(info).fadeIn(100);
            }
        });
    });

    $(trigger).mouseleave(function(e) {
        $(infos).each(function(i2, info) {
            $(info).fadeOut(200);
        });
    });
});
于 2012-05-06T21:36:12.043 回答