Hover effect like facebook

Question

I do create a <li> like this.

<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>

How can I do the hover effect for each friend like facebook does it?

Everywhere in the cell, e.g. Allen Yee, I can activate him to send him a request. How can I realize it with my <li>?

Update

in head:

<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>

in body:

<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> 

Answer 1

if you want all the content inside the li to trigger the checkbox to be selected, You should put all the content inside the label element.

<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>

In this case you don't even need the for attribute on the label, because the label will apply to any form control (input, select, etc.) that is inside it.

If you want to change the style of the elements inside the li when it's hovered, you could use a pseudo-class called :hover

For instance:

li:hover {
    background: #000;
}

It would change the background of the li element when it's hovered.

UPDATE

As the framework you're using doesn't allow you to wrap all li's content in the label element, I'd suggest you a solution with javascript.

Here's a simple example:

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;
        };
    }
}

The code above will take a list of all li elements that, when clicked, will get the first input tag inside of it and verify if it's checked, if so, it'll be unchecked, otherwise it will be checked. Also, it sets a background color for each case.

This script is simulating how an input of type checkbox would behave if it were wrapped in a label element.

UPDATE 2

As you noted in your comment bellow, the checkbox isn't working properly. It's because there's occurring a Event Bubbling. There are also several topics in Stackoverflow with deep explanation of what it is.

I updated the snippet above in order to correct the checkbox functionality.

See jsFiddle.

Hope it helps.

Answer 2

You can do the hover effects both in css and JQuery. in css you can use '#idname:hover' or '.classname:hover'. In JQuery you can use:

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

});