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那样为每个朋友做悬停效果呢？

在牢房的任何地方，例如 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>
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属性label，因为label将应用于其中的任何表单控件（input、select等）。

如果你想在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类型checkbox如果被包裹在一个label元素中会如何表现。

更新 2

正如您在下面的评论中指出的那样，checkbox它无法正常工作。这是因为发生了Event Bubbling。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 回答