javascriptライブラリがサポートされていないjQueryで示されたDOM操作

Question

私のライブラリ、特にjQueryに甘やかされています。私は一人で、純粋なJavaScriptでやりたいことは私の究極の目標は、IDがホバーされたときに持っている

$('#id').mouseover(function(){ 
var wide = $(this).width(); 
var high = $(this).height(); 

$('#id2').css({"position":wide+'px' high+'px'}).show(); 
}); 
$('#id').mouseout(function(){$('#id2').hide();}); 

と同等のです、それはID要素の右下にID2を示しています。残念なことに、私はこれをすべてjqueryですばやく手に入れることができるでしょう。私は真剣にそれに甘やかされていますが、私はjqueryのようなライブラリのサポートなしでこれを行う必要があります。理想的には、私はIDの代わりにクラスを使用したいと思いますが、JavaScriptだけではそれを完全にサポートしていません。

Answer 1

あなたのdivのスタイリングにもよりますが、私は良いサンプルのためにいくつかのサンプルHTMLを貼り付けました。

<div style="position: relative; height: 200px; width: 200px;"> 
    <div id="first" style="position: absolute"> 
     11111111111111111 
    </div> 
    <div id="second" style="position: absolute; display: none;"> 
     22222222222222222 
    </div> 
</div> 

<script type="text/javascript" language="javascript"> 
    var first = document.getElementById("first"); 
    first.onmouseover = function() { 
     var left = this.offsetLeft + this.offsetWidth; 
     var top = this.offsetTop + this.offsetHeight; 

     var second = document.getElementById("second"); 
     second.style.left = left + "px"; 
     second.style.top = top + "px"; 
     second.style.display = "block"; 
    } 
    first.onmouseout = function() { 
     document.getElementById("second").style.display = "none"; 
    } 
</script>