マウスの位置に応じてJavascriptを使用してCSSの 'top'プロパティを設定します。

Question

JavaScriptを使用してtop CSSプロパティを設定しようとしています。

100pxのような絶対値を使用するとうまくいきますが、event.clientXを使用してマウスの位置を取得しようとすると機能しません。

jQueryやその他のライブラリを使用したくないことに注意してください。これまで

コード：

var el = document.getElementById('hide'); 

document.getElementById("foo").onmouseover = function() { 
    el.style.border = "5px solid red"; 
    el.style.display = "block"; 
    el.style.top = '100px'; // This works 
    el.style.top = event.clientX; // However this does not work 
}; 

HTML：またjsfiddle

<div id="foo"> 
    <p> 
    Hover me 
    </p> 
</div> 

#hide { 
    display:none; 
} 

を参照してください。

Answer 1

ユニットをサイズ宣言に追加してください。また、clientXとtopを意図的に使用したかどうかはわかりませんが、x軸が左右に、topプロパティが上下に設定されています。その結果、このようになります（トップとclientXあなたがそうであるように使用して）：

var el = document.getElementById('hide'); 

document.getElementById("foo").onmouseover = function() { 
    el.style.border = "5px solid red"; 
    el.style.display = "block"; 
    var position = event.clientX + 'px'; 
    el.style.top = position; 
}; 

Answer 2

イベントを関数に渡していません。また、あなたは 'px'がありません。これを試してください：

var el = document.getElementById('hide'); 

document.getElementById("foo").onmouseover = function(event) { 
    el.style.border = "5px solid red"; 
    el.style.display = "block"; 
    el.style.top = event.clientX + 'px'; 
};