jquery - 悬停时，div 接管整个 li

Question

我有一个无序列表，每个 li 包含一个 img 和一个 div。我的目标是将鼠标悬停在 div 上将使 img 执行某些操作。现在它只是添加/删除类，但那是一个占位符。添加/删除有效，但这不是问题(尽管如果您有这方面的提示，总是很乐意从更有经验的人那里得到意见)。

问题是 hovered-div 在悬停时突然扩大以填满整个 li，而且似乎暂时失去了上边距。这意味着当那个 div 被一个花哨的按钮取代时......按钮可能会像当前的纯文本一样跳动。

html:

<ul id="headmenu">
    <li id="kite1">
        <img src="img/kitesani1a.png" id="kites1a" />
        <div id="attend" class="headmenulink">attending</div>
    </li>
</ul>

CSS:

ul#headmenu { margin: 2em 0 0 0; padding: 0; }
ul#headmenu li { margin: 0 1% 0 0; padding: 0; width: 19%; float: left; display: inline; list-style: none;}
ul#headmenu img { padding-bottom: 5em; position: relative; top: 0; left: 0; z-index: 100; }
li .headmenulink { padding-top: 2em; position: relative; bottom: 0; left: 0; border:1px solid blue; }

ul#headmenu li img {
    transition-duration: 0.8s;
    transition-property: transform;
}

.kite1ahover {
    float: right;
    position: relative;
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
}

(在实时版本中，css 更加冗长。)最后，当前的 jQuery 草稿:

$("#attend").hover(function(){
    $("#kites1a").addClass('kite1ahover').delay(500).queue(function(next){
        $(this).removeClass('kite1ahover');
        next();
});

我做了一个 jsfiddle，但它给了我奇怪的错误。不确定它是否可以编辑，但以防万一，它位于 http://jsfiddle.net/klh02/5UMK5/7/ -- 然后我还在 http://www.karinoyo.com/temp/index.php 做了一个精简的真实示例.如果你打开实时版本(不是 fiddle )，你会看到临时的蓝色边框在悬停时扩大，同时文本跳上一两行。 (注意:唯一的“实时”悬停在“参加”里，从左边开始的第一个里。)

扩展的 div 是因为 CSS 吗？还是因为 jQuery？或者这只是在这种情况下发生的事情，我需要做一些创造性的定位以使 div 保持原样而不是展开/跳跃？

提前致谢!

Answer 1

在你的 fiddle 中，DIV 增长是因为悬停类内部有一个 float :

.kite1ahover {
    float:right; /* remove this */
    position: relative;
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg); 
    -o-transform:rotate(10deg);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity: 1;
    opacity: 1;
}​

这打破了盒子的高度。一旦删除它，DIV 就会停止增长。您得到的“奇怪”错误来自 jQuery 代码中缺少的右括号:

$(document).ready(function(){
    $("#attend").hover(function(){
        $("#kites1a").addClass('kite1ahover').delay(500).queue(function(next){
            $(this).removeClass('kite1ahover');
            next();
        });
    });
// missing brackets here...
});

您会找到一个工作变体 here .