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

在这种情况下，您甚至不需要for上的label属性，因为label将适用于任何表单控件（input，{{1其中就在里面。

如果您希望在select悬停时更改其中的元素样式，可以使用名为li的{​​{3}}

例如：

:hover

它会在li:hover { background: #000; } 元素悬停时改变背景。

的更新

由于您使用的框架不允许您将所有li内容包装在li元素中，因此我建议您使用javascript解决方案。

这是一个简单的例子：

label

上面的代码将列出所有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如果包含在checkbox元素中的行为方式。

更新2

正如您在评论中指出的那样，label无效。这是因为发生了pseudo-class。 Stackoverflow中还有几个Event Bubbling，深入解释了它是什么。

我更新了上面的代码段，以便更正checkbox功能。

请参阅topics。

希望它有所帮助。

Answer 2

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

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

}）;