0

私は、互いに関連している異なる部分を持つテキスト コンテンツに取り組んでいます。ユーザーが関連する部分にカーソルを合わせたりマウスオーバーしたりして、関連するすべての部分を同じハイライトで同時に強調表示したいと考えています。色。

コンテンツを HTML に生成する前に、関連する部分に関するすべての情報を (サーバー上に) 持っていると仮定すると、これを行う最も簡単な方法は何ですか。つまり、適切な css または javascript を挿入して、ページごとにアドホックで必要な設定を取得できます。

4

2 に答える 2

0

あなたの質問が理解できれば、これは jquery を使って簡単に行うことができます。

まず、属性を持つ html 要素を設定します。私は を使っています。あなたは (ほとんど) 何でもthisisfor使えます。したがって、サーバー側で各アイテムが属する「グループ」を事前に決定できる場合は、選択した属性でそれらを分類し、次に「グループ」に分類できます。

html

<div class="hoverme" thisisfor="group3">What group are we in?</div>
<div class="hoverme" thisisfor="group3">What group are we in?</div>
<div class="hoverme" thisisfor="group2">What group are we in?</div>
<div class="hoverme" thisisfor="group4">What group are we in?</div>

thisisfor次に、jquery を使用して、属性 (この場合は属性) をチェックするホバー イベントを設定できます。

jquery

$("[thisisfor]").hover(function(){ /* anything with 'thisisfor' attribute */

    var group = $(this).attr('thisisfor');  /* store its value as variable 'group' */

    $("[thisisfor="+ group +"]").html(group);  /* all with this group that was hovered....change the text (or whatever your plan is) */

});​

私の例を見てください

しかし、そう、可能性は属性を使用して無限大です.

于 2012-09-29T20:21:40.993 に答える
0

最速の方法は、本体または最上位のコンテナ要素のクラスを切り替えて、子孫が色付き/強調表示などで修正されるように CSS を定義することです。これは、関連付け内の各要素からクラスを追加/削除するよりも高速です。

たとえば、関連するすべての要素にクラス「rel-1」がある場合、次のような CSS 定義を使用できます。

body.rel-1 .rel-1 {
    background-color: #ddd;
    /* .. other styles */
}

class を持つ任意の要素にカーソルを合わせるとrel-1、body/container 要素で同じクラスを切り替えます。

例えば：

$('.rel-1').mouseover(function() {
    $(body).addClass('rel-1');
});

$('.rel-1').mouseout(function() {
    $(body).removeClass();
});

等々..

于 2012-09-29T19:36:49.910 に答える