0

メニューボタンにマウスオーバーすると表示されるツールチップdivを作成しました。ボタンにマウスオーバーするとツールチップが表示され、マウスアウトすると非表示になりますが、サブメニュー（＃submenu.Solutions in thisケース）そしてこれを行う方法がわかりません。タイムアウトと変数を設定して、サブメニューにマウスオーバーがあるかどうかを確認しようとしましたが、バグが発生しました。

最近、mousemoveを追加して、幅と高さで何かできるかどうかを確認しましたが、少し困惑しています。だから私はあなたが見ることができるようにそれをそこに残しました。

$('#btnSolutions').mouseover(function() {
    $('#btnSolutions').css("background", "#0f4759");
    $('#submenu.Solutions').css("display", "block");
    var p = $(this);
    var offset = p.offset();
    $("#submenu.Solutions").offset({ top: offset.top + 37, left: offset.left})
}).mousemove(function(e){
    var p = $(this);
    var offset = p.offset();
    $('#submenu.Solutions').height();
    $('#submenu.Solutions').width();
}).mouseout(function() {
    $("#btnSolutions").css("background", "none");   
    $('#submenu.Solutions').css("display", "none");
}); 
//  
$('#submenu.Solutions').mouseover(function() {

}).mouseout(function() {
    $("#btnSolutions").css("background", "none");   
    $('#submenu.Solutions').css("display", "none");
});

ありがとうございました。

編集：JS FIDDLE http://jsfiddle.net/Lp5Tt/

4

2 に答える 2

1

<ul>サブメニューを<li>親メニューエントリのに移動し、でサブメニューを作成することにより、CSSを使用してマウスオーバーでサブメニューdisplay: block;を簡単に拡張できますli:hover。このフィドルを参照してください（サブメニューのスタイリングは完了していませんが、アイデアが得られるはずです）。

このアプローチの問題点：CSSでは簡単にアニメーション化できません。ただし、それでも要素のmouseoverイベントでアニメーションを実行することはできます。<li>

利点：コンテンツを表示するためにJavaScriptは必要ありません。また、これはすべての最新のブラウザーで機能するはずです（IE 5.5ではないかもしれませんが、とにかく「実際の」ブラウザーではありません：D）。

于 2012-11-11T16:02:36.370 に答える
0

正確に何を達成しようとしているのかわかりませんが、初心者の場合、この機能の大部分にjavascriptの代わりにcssを使用することで、コードを削減、簡素化、最適化できます。

例：

$('#btnSolutions').mouseover(function() {
    $('#btnSolutions').css("background", "#0f4759");

}.mouseout(function() {
$("#btnSolutions").css("background", "none");

could be replaced with

 #btnSolutions:hover {
    background: #0f4759;
 }

サブメニューをボタンの子要素にすることができます。このように、cssを使用して、ボタンの：hover中にサブメニューを表示/非表示にすることができます。

于 2012-11-11T15:26:19.907 に答える