0

私はphpコードを使用してデータベースからの情報でdivをロードしています：

for ($i=0; $i < $stmt->rowCount(); $i++){
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    $name = $row['uc_name'];
    $image_url = $row['uc_image'];
    $color = $row['uc_color'];

は、行がいくつあってもボックスを作成します：http: //jsfiddle.net/pKR5t/1/

データベースから取得したアイテムごとにドロップダウンメニューを作成しようとしています。ユーザーがカーソルを合わせるclass="header"と、ドロップダウンメニューが表示されますが、内部のリストは、カーソルを合わせたボックスのリストに関連している必要があります。

ここに画像の説明を入力してください

.on()この機能を使ってこれを実現できると思いますが、使い方がまったくわかりません。これを達成するための助けがあれば役に立ちます。ありがとう

4

2 に答える 2

0

css を使用すると、javascript なしでこれを行うことができます。

ヘッダー div 内にホバー ボックスを挿入すると、css:hoverを使用してホバー時に非表示にしたり表示したりできます。

HTML

<div class="header">
    <div class="title">PHP Row 1</div>
    <div class="hoverBox">
        <div class="hoverBoxTitle">Hover</div>
        <div class="hoverBoxContent">Hover Content</div>
    </div>
</div>

CSS

.hoverBox {
    display: none;
    position: absolute;
    top: 0px;
    left: 170px;
    width:170px;
    height:90px;
    background:#333333;
    z-index: 100;
}
.header:hover .hoverBox {
    display: block;
}

デモ

于 2013-01-09T22:11:32.330 に答える
0

onandを使用するには、次のようにandイベントhoverを使用します。mouseentermouseleave

$("div.box div.header").on("mouseenter", function() { //mouseenter event
    var currentBox = $(this).closest("div.box");
    var currentTitleText = $(this).find("div.title").html();

    //popup the list

}).on("mouseleave", function() { //mouseleave event
    //close the list
});

追加情報については、この投稿を確認してください。

編集

更新さmouseoverれmouseout、少し良くmouseenterなり、mouseleaveイベントが発生します。

于 2013-01-09T22:17:31.913 に答える