Question

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

如果你在.infotrigger上快速移动鼠标，则.iteminfo对于mouseleave不可见，因此会留下.iteminfo，这是不可取的。

你可以玩它here。

JQUERY：

$(function() {

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

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

    });

我已经搜索了几个星期的解决方案并且已经接近了，但似乎总是回到我认为需要“这个”触发器阻碍了。我使用了子处理程序，因为我对菜单上的每个项目使用相同的类。没有它，菜单上的每个比萨饼的信息都会弹出。我一开始尝试了一个列表，但似乎无法让它工作。如果有一种更优雅的方式来解决这个问题，那我就是所有的目光。我想知道我构建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开发的样子。

Answer 1

不确定是否会做多少，但尝试添加一些停靠点，如果没有创建备份计划：

$('.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);
});

Answer 2

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

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

我已经测试过，它运行正常;）

Answer 3

<强> 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);
        });
    });
});

如果光标在目标可见之前移动，则不会触发mouseleave

3 个答案: