0

私は<li>このようなものを作成します。

<li>
<input type="checkbox" value="<?php echo $value; ?>" id="form_friend_<?php echo $value; ?>" name="form[friend][]" />
<img id="img_friend_<?php echo $value; ?>" src="">
<label for="form_friend_<?php echo $value;?>" ><?php echo $label;?></label>
</li>

Facebookのように友達ごとにホバー効果を出すにはどうすればよいですか?

アレン・イーなど、独房のどこでも、私は彼を活性化して彼にリクエストを送ることができます。どうすればそれを実現でき<li>ますか？

ここに画像の説明を入力

アップデート

頭の中で：

<script type="text/javascript">
var lis = document.getElementsByTagName('li');

for( var i = 0, l = lis.length; i < l; i++ ) {
lis[i].onclick = function() {

    var c = this.getElementsByTagName('input')[0];

    if ( c.checked )
        c.checked = false;
    else
        c.checked = true;
};
}
<script>

体内:

<li >
  <input type="checkbox" value="1" id="form_friend_1" name="form[friend][]" />
  <img id="img_friend_1" src="">    <label for="form_friend_1" >My name</label>
</li>
4

2 に答える 2

1

内のすべてのコンテンツliをトリガーしcheckboxてを選択する場合は、すべてのコンテンツをlabel要素内に配置する必要があります。

<li>
    <label for="form_friend_<?php echo $value;?>" >
        <input type="checkbox" value="<?php echo $value; ?>" id="form_friend_<?php echo $value; ?>" name="form[friend][]" />
        <img id="img_friend_<?php echo $value; ?>" src="">
        <?php echo $label;?>
    </label>
</li>

この場合、はその内部にあるすべてのフォームコントロール（、、など）に適用されるため、のfor属性も必要ありません。labellabelinputselect

ホバーしたときに内部の要素のスタイルを変更したい場合は、次のような疑似クラスをli使用できます。:hover

例えば：

li:hover {
    background: #000;
}

liホバーすると、要素の背景が変更されます。

アップデート

li使用しているフレームワークでは、すべてのコンテンツを要素でラップすることはできないためlabel、javascriptを使用した解決策をお勧めします。

簡単な例を次に示します。

window.onload = function() {

    var lis = document.getElementsByTagName('li');

    for( var i = 0, l = lis.length; i < l; i++ ) {
        lis[i].onclick = function(e) {

            e = e || window.event;
            var el = e.target || e.srcElement;

            if ( el.nodeName == 'INPUT' ) return;

            var c = this.getElementsByTagName('input')[0];

            if ( c.checked ) {
                c.checked = false;
                this.style.background = 'white';
            } else {
                c.checked = true;
                this.style.background = 'blue';
            }

            return false;
        };
    }
}

上記のコードはli、クリックするとそのinput中の最初のタグを取得し、チェックされているかどうかを確認するすべての要素のリストを取得します。チェックされている場合はオフになり、チェックされていない場合はチェックされます。また、それぞれの場合の背景色を設定します。

inputこのスクリプトは、 of型checkboxが要素にラップされた場合の動作をシミュレートしていlabelます。

更新2

以下のコメントで述べたように、checkboxは正しく機能していません。イベントバブリングが発生しているためです。Stackoverflowには、それが何であるかを深く説明したトピックもいくつかあります。

機能を修正するために、上記のスニペットを更新しましたcheckbox。

jsFiddleを参照してください。

それが役に立てば幸い。

于 2013-03-10T23:03:52.737 に答える
0

cssとJQueryの両方でホバー効果を実行できます。cssでは、「＃idname：hover」または「.classname：hover」を使用できます。JQueryでは、次を使用できます。

$('selector that you select').hover(function(){

}）;

于 2013-03-10T23:02:46.843 に答える