Question

我有一个无序列表，每个li包含一个img和一个div。我的目标是将鼠标悬停在div上会让img做点什么。现在它只是添加/删除类，但这是一个占位符。添加/删除有效，但这不是问题（尽管如果你有这方面的提示，总是很乐意从更有经验的人那里获得输入）。

问题在于，悬停的div在突然扩大以填满整个李，并且似乎暂时失去其上部填充物。这意味着当用一个花哨的按钮代替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做了一个精简的现实示例。如果您打开实时版本（而不是小提琴），您将看到悬停时临时蓝色边框展开，同时文本跳起一两行。（注意：唯一'直播'悬停在'参加'li，左起第一个li。）

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

提前致谢！

Answer 1

弹跳是因为你用“kite1ahover”类

制作img float

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

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

e.g。 position:relative; left:100px;

Answer 2

在你的小提琴中，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。

在悬停时，div接管整个李

2 个答案: