javascript onmouseover應用於不同類的div嗎？

我想學習一點關於JavaScript和它是如何工作的。我可以設法散列出一些基本的命令，但我試圖把這個線程佈局變成一個javascript onmouseover命令，用於消息板上的crossbrowser兼容性，代碼不允許css懸停屬性在IE中工作，除非它們處於「a」標籤。請記住，我無法更改網頁，只有這個小塊的佈局，所以我不能設置一個DOCTYPE來使這個CSS在IE中工作。javascript onmouseover應用於不同類的div嗎？

這裏是我有沒有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函數一樣滑入。我在這裏完全不知所措！

來源

2013-07-06 Sabrina Mac

我會嘗試使用jQuery和jQuery Easing plugin

我敢肯定，這將是CSS過渡更安全的替代。

使用jQuery，您可以將懸停事件附加到外部div（「#ruwhole」），然後爲內部div（「.postbox」和「.statbar」）指定mouseover和mouseout動畫。與單獨使用jQuery相比，easing插件爲您提供了更多的動畫效果可供選擇。

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' 
        } 
      ); 
     } 
    ); 

});

來源

2013-07-06 10:39:26

javascript onmouseover應用於不同類的div嗎？

回答

相關問題