javascript onmouseover 适用于不同类的 div？

Question

我正在尝试学习一些关于 javascript 及其工作原理的知识。我可以设法散列一些基本命令，但我试图将此线程布局转换为 javascript onmouseover 命令，以便在留言板上实现跨浏览器兼容性，其代码不允许 css 悬停属性在 IE 中工作，除非它们在“一个”标签。请记住，我无法更改网页，只能更改这一小块布局，因此我无法设置文档类型以使此 css 在 IE 中工作。

这是我没有 js 的结果:http://jsfiddle.net/KRArE/

#postbody p::first-letter {
letter-spacing:1px;
line-height:0.5;
font-size: 30px;
font-family:'Lovers Quarrel', cursive;
}
#ruwhole {
width: 420px;
height: 420px;
position: relative;
overflow: hidden;
}
#ruwhole:hover .postbox {
-webkit-transition: 1s all ease-in-out;
-moz-transition: 1s all ease-in-out;
-o-transition: 1s all ease-in-out;
transition: 1s all ease-in-out;
position: absolute;
top: 0px;
width: 400px;
height: 370px;
border:10px solid #eeeddb;
}
#ruwhole .postbox {
-webkit-transition: 1s all ease-in-out;
-moz-transition: 1s all ease-in-out;
-o-transition: 1s all ease-in-out;
transition: 1s all ease-in-out;
position:absolute;
width: 400px;
height:370px;
top: -390px;
border:10px solid #eeeddb;
}
#ruwhole:hover .statbar {
-webkit-transition: 1s all ease-in-out;
-moz-transition: 1s all ease-in-out;
-o-transition: 1s all ease-in-out;
transition: 1s all ease-in-out;
position: absolute;
bottom: 0px;
width: 100%;
height: 30px;
}
#ruwhole .statbar {
-webkit-transition: 1s all ease-in;
-moz-transition: 1s all ease-in;
-o-transition: 1s all ease-in;
transition: 1s all ease-in;
position: absolute;
bottom: -30px;
width: 100%;
height: 30px;
}
#postbody em {
color: #841b1f;
}

我可以更改应用鼠标悬停的 div 的质量，但是我如何将鼠标悬停 js 命令应用到一个 div 并让更改显示在其他 div 中？我希望用户能够将鼠标悬停在整个布局上，并让两个不在屏幕上的 div 滑入，就像它们使用 css 函数一样。我在这里完全不知所措!

Answer 1

我会尝试使用 jQuery 和 jQuery Easing plugin

我很确定这将是 CSS 过渡的更安全替代方案。

使用 jQuery，您可以将悬停事件附加到外部 div(“#ruwhole”)，然后为内部 div(“.postbox”和“.statbar”)指定鼠标悬停和鼠标移开动画。与单独使用 jQuery 相比，缓动插件为您提供了更多可供选择的动画效果。

JavaScript 本身可能如下所示。这是一个基于您的 jsFiddle 的工作示例

(抱歉我无法在 IE 中测试。)

希望这对您有所帮助。

$(function () {

    var ruwhole = $('#ruwhole'),
        postbox = ruwhole.find('.postbox'),
        statbar = ruwhole.find('.statbar');

    ruwhole.hover(
        function () {
            postbox
                .animate(
                    { top: '0' }, {
                        duration: '1',
                        easing: 'easeInOutQuad'
                    }
                );
            statbar
                .animate(
                    { bottom: '0' }, {
                        duration: '1',
                        easing: 'easeInQuad'
                    }
            );
        },
        function () {
            postbox
                .animate(
                    { top: '-390' }, {
                        duration: '1',
                        easing: 'easeInOutQuad'
                    }
                );
            statbar
                .animate(
                    { bottom: '-30' }, {
                        duration: '1',
                        easing: 'easeInQuad'
                    }
            );
        }
    );

});