悬停时，div 占据整个 li

Question

我有一个无序列表，每个 li 包含一个 img 和一个 div。我的目标是悬停在 div 上将使 img 做一些事情。现在它只是添加/删除类，但这是一个占位符。添加/删除有效，但这不是问题（尽管如果您对此有提示，总是很乐意从更有经验的人那里获得意见）。

问题是悬停的 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 做了一个精简的真实示例。如果您打开实时版本（不是小提琴），您会看到临时蓝色边框在悬停时扩展，同时文本跳上一两行。 （注意：唯一的“实时”悬停在“参加”李，左起第一个李。）

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

提前致谢！

Answer 1

在你的小提琴中，DIV 会增长，因为悬停类内部有一个浮点数：

.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。

Answer 2

弹跳是因为您使用“kite1ahover”类使 img 浮动

当元素浮动时，它们占据的大小被忽略（好像它们是空心的），因此 div 成为该框中的顶部元素，因此跳转到顶部。

如果你停止使用浮动，而是使用左、右、上、下的组合，你应该可以随意移动 img

例如 position:relative; left:100px;