像facebook一样的悬停效果

Question

我确实创建了一个像这样的<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那样为每个朋友做悬停效果呢？

单元格中的任何地方，例如Allen Yee，我可以激活他向他发送请求。我怎样才能用我的<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> 

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

在这种情况下，您甚至不需要label 上的for 属性，因为label 将应用于其中的任何表单控件（input、select 等） .

如果您想在 li 悬停时更改其内部元素的样式，可以使用名为 :hover 的 pseudo-class

例如：

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标签并验证它是否被选中，如果是，它将被取消选中，否则它将被检查。此外，它还为每种情况设置了背景颜色。

此脚本模拟checkbox 类型的input 如果被包裹在label 元素中会如何表现。

更新 2

正如您在下面的评论中指出的那样，checkbox 无法正常工作。这是因为发生了Event Bubbling。 Stackoverflow 中也有几个topics 对它的含义进行了深入的解释。

我更新了上面的 sn-p 以更正 checkbox 功能。

见jsFiddle。

希望对你有帮助。

Answer 2

您可以在 css 和 JQuery 中制作悬停效果。在 CSS 中，你可以使用 '#idname:hover' 或 '.classname:hover'。在 JQuery 中，您可以使用：

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

});