3

私の状況は次のとおりです。それぞれがホバー効果を持つ 2 つの部分的に重なり合う div があります。Div 2 - 画面の下部 20% にまたがる領域であり、ユーザーがその上 (たとえば、画面の下部付近) にカーソルを合わせると、コントロールが下部から上にスライドして、グローバル プロパティをテーブルに変更できるようになります。

ブラウザがどちらかのオブジェクトのホバーを個別に検出するようにしたいのですが、一番上にあるオブジェクトはホバーを検出しますが、もう一方はホバーを検出しません。ほとんど関連する質問がたくさん見つかりましたが、これに答えているように見えるものは何もありません。

これはプロトタイプ用であるため、1 つのブラウザー (できれば Chrome) でのみ機能するハッキーな回答/回答は問題ありません。また、CSS、jQuery、JS を使用したソリューションもすべて OK です。

編集：私の問題を説明すると思われるフィドルを追加しました：http://jsfiddle.net/Gkgrx/

したがって、「テーブル」の下部（ホバー時に緑色に変わる大きな赤い四角）にカーソルを合わせると、テーブルコントロールが上にスライドする領域にヒットすると（スライドします）、テーブルはホバー状態を失います-私はしたいですそれでもホバーを検出します。

明らかに、ここでコードをカット アンド ペーストする必要があります。

CSS:

.controlhover {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 150px;
    z-index: 1;

}

.tablecontrol {
    position:absolute;
    bottom: 0px;
    left: 200px;
    right: 200px;
    background-color: #242D2F;
    opacity: .9;
    height: 70px;
    color: #FFFFFF;
}

.table {
    position: absolute;
    top: 0px;
    left: 50px;
    right: 50px;
    height: 500px;
    background-color: red;
}

.table:hover {
    background-color: green;
}

HTML:

<div class="table">This is a table that does stuff on hover</div>
<div class="controlhover"></div>
<div class="tablecontrol">This is the sliding control element</div>

JS:

$('.tablecontrol').slideUp();
$('.controlhover').hover(function(){
  $('.tablecontrol').slideDown()
}, function() { 
  $('.tablecontrol').slideUp();
});

ありがとう

4

2 に答える 2