Question

我想说：“如果光标位于以下任一元素之上，请将内部元素的高度调到父元素的中间位置。”

一旦内部元素向上移动一半，我希望能够在内部和两个元素之间移动鼠标，而不会对外部或内部元素位置进行任何更改。

在鼠标输出任何一个元素时，我希望内部元素高度再次降低到外部元素的高度。

继承要素：

<div id="slide_back_1" class="slide_back float" style=" width: 100px; height: 100px; margin: 10px; background-color: black; overflow: hidden; ">
    <div id="slide_hide_1" class="slide_hide float" style=" width: 100px; height: 100px; margin-top: 100px; background-color: silver; "></div>
    <div class="clear"></div>
</div>

我一直在搞乱各种jquery，包括.hover，.mouseover和.mouseout，但没有取得多大成功。

问题：

如何对jquery进行编码以实现此功能，请记住，在单个页面上可能存在多个这样的功能。

任何帮助赞赏的人......

Answer 1

拜托，看看我是否理解你：http://jsfiddle.net/QfYHA/2/

更新：此处也复制了代码。

$('.slide_back').hover(function() {
    var $this = $(this),
        height = $this.height(),
        $slideHide = $this.find('.slide_hide');

    $slideHide.stop()
              .animate({marginTop: height / 2 + 'px'}, 400);
}, function() {
    var $this = $(this),
        height = $this.height(),
        $slideHide = $this.find('.slide_hide');

    $slideHide.stop()
              .animate({marginTop: height + 'px'}, 400);
});

Answer 2

这有帮助吗？ http://jsfiddle.net/TqLUt/6/

 $('.slide_back').mouseover(function() {
   $(this).find('.slide_hide').css('marginTop', '50px');
 });
 $('.slide_back').mouseout(function() {
   $(this).find('.slide_hide').css('marginTop', '100px');
 });

jquery - 创建交互元素

2 个答案: