Question

我有一根 p子,当用户把自己的 cur子 over在一片 p子上时,就会在一片 over子上展示有关这一皮的信息。我迄今所做的工作,但有一个qui子。

如果你把 mo调太快地压倒了infotrigger,那么item子就会被看上去火,从而使之可见一斑。

可在http://uppercrust.gillisad.com/menu” rel=“nofollow”>here上演。

请求:

$(function() {

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

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

    });

我为解决办法寻找了几个星期的时间,并且已经结束,但似乎总是回到我所认为的“这”触发点需要。我使用了儿童手稿,因为每件菜单都使用相同的班子。否则,每个Pizza有关菜单的信息就会消失。我首先尝试了一份清单,但似乎无法工作。如果采取更明智的方式来做到这一点,就会一眼。我很想知道,我如何构筑超文本,是否是我所想达到的最大障碍。

传真:

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

感谢你们的帮助。这正是设计者试图开发网络。

Answer 1

如何简单地约束<条码>hover,<条码>

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

我已经测试过,并做了罚款。

Answer 2

如果不制定后备计划,则不肯定会做很多工作,而是尝试增加一些工作。

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

Probably the best solution would be to just do:

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

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

Answer 3

CSS
Why not pure CSS? http://jsfiddle.net/mqchen/QFJz7/

它只是表明对 h和支持33的浏览器来说,胎儿会失去作用。

Javascript
Here is an old-school javascript solution that is slightly more verbose: http://jsfiddle.net/mqchen/Sbg7g/3/

它基本上掩盖了所有其他人,而不管“皮扎”的 mo留。检查 j。你们只需要考虑 j印部分。

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

友情链接