为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/HTML/CSS

/表单美化

那位大哥帮我 看下 为什么 hover没用 完全没反应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>表单美化_复选按钮篇</title>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<style type="text/css">
body{font:12px/22px "微软雅黑";}

.checkbox {
    margin: 20px auto;
    width: 520px;

}

.checkbox ul {
    height: 30px;
    overflow: hidden;
    border: 1px solid #D4D4D4;
    border-width: 1px 0;
    padding-left: 10px;
}

.checkbox ul li {
    float: left;
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
    position: relative;
    text-indent: 1px;
}

.checkbox ul li input {
    display: none;
}

.checkbox ul li label {
    padding-left: 23px;
}

.checkbox ul li b {
    top: 6px;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0px;
    background: url("images/checkbox.gif") no-repeat -10px -18px;
}

.checkbox ul li :hover b {
    background-position: -10px -118px;
}


</style>
    <script type="text/javascript">

        function createTag() {
            var li = document.getElementById("checkList").getElementsByTagName("li");

            for (var i = 0; i < li.length; i++) {
                var label = li[i].getElementsByTagName("label");
                var b = document.createElement("b");
                li[i].insertBefore(b, label[0]);

            }
        }

        function checkList() {

        }

        function addLoadEvent(fn) {
            var oldOnload = window.onload;
            if (typeof window.onload != "function") {
                window.onload = fn;
            } else {
                window.onload = function () {
                    oldOnload();
                    fn();
                }
            }
        }

        addLoadEvent(createTag);
        addLoadEvent(checkList);

    </script>
</head>

<body>
<div class="checkbox">
   <form action="#" method="post" name="typeForm">
        <ul id="checkList">
            <li class="select"><input type="checkbox" name="type" id="x" value=""/><label for="x">消费者保障</label></li>
            <li><input type="checkbox" name="type" id="po" value=""/><label for="po">破损补寄</label></li>
            <li><input type="checkbox" name="type" id="s" value=""/><label for="s">7天退换</label></li>
            <li><input type="checkbox" name="type" id="z" value=""/><label for="z">正品保障</label></li>
            <li><input type="checkbox" name="type" id="d" value=""/><label for="d">电子凭证</label></li>
            <li><input type="checkbox" name="type" id="wang" value=""/><label for="wang">旺旺在线</label></li>
            <li><input type="checkbox" name="type" id="p" value=""/><label for="p">品牌授权</label></li>
            <li><input type="checkbox" name="type" id="h" value=""/><label for="h">货到付款</label></li>
            <li><input type="checkbox" name="type" id="cre" value=""/><label for="cre">信用卡</label></li>
        </ul>
    </form>
</div>
</body>
</html>


winter668

2018-12-05

源自：表单美化  2-3

关注问题 我要回答
2146
操作
收起

正在回答

2 回答

一人一猫 回答被采纳 +2 积分
2018-12-11 
.checkbox ul li :hover b

你的li后面不需要空格

.checkbox ul li:hover b

0 回复 有任何疑惑可以回复我~
收起回答
#1

winter668 提问者

嗯 已经找到了 3Q
2018-12-12 回复 有任何疑惑可以回复我~
逃离外包
2019-01-16

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>复选框案例</title>

<link rel="stylesheet" href="../../common/reset.css">

<style>

body{

font:13px/26px "微软雅黑" ;

}

.typeList{

width: 540px;

height: 30px;

margin:50px auto;

border: 1px solid #DFDFDF;

border-width: 1px 0;

}

.typeList ul{

height: 30px;line-height: 30px;padding-left: 15px;

overflow: hidden;

}

.typeList ul li{

float: left;

margin-right: 12px;

position: relative;

}

.typeList ul li input{

display: none;

}

.typeList ul li b{

width:20px;

height: 20px;

display: block;

background: url(images/checkbox.gif) no-repeat -12px -18px;

position: absolute;

top:5px;

left: 0;

}

.typeList ul li b:hover{

background-position: -12px -118px;

}

.typeList ul .selected b,.typeList ul .selected b:hover{

background-position: -12px -218px;

}

.typeList ul li label{

padding-left: 23px;

}

</style>

<!-- <script src="js/checkbox.js"></script> -->

<script>

window.onload=function(){

var li=document.getElementById("checkList").getElementsByTagName("li");

var label;

function createTag(){

for(var i=0;i<li.length;i++){

label=li[i].getElementsByTagName("label");

var bTag=document.createElement("b");

li[i].insertBefore(bTag,label[0]);

}

}

function checkList(){

for(var i=0;i<li.length;i++){

li[i].onclick=function(){

if(this.className=="selected")

{

this.className=null;

}

else

{

this.className="selected";

}

}

}

}

createTag();

checkList();

}

</script>

</head>

<body>

<div class="typeList">

<form action="#" method="post" name="typeList">

<ul id="checkList">

<li class="selected">

<input  type="checkbox" name="typeList" id="xiao">

<!-- 给label的for和复选框的id起一样的名字，点击label内容时，也能选中复选框 -->

<label for="xiao">消费者保障</label>

</li>

<li>

<input  type="checkbox" name="typeList" id="broken">

<label for="broken">破损补寄</label>

</li>

<li>

<input  type="checkbox" name="typeList" id="sevenday">

<label for="sevenday">7天退换</label>

</li>

<li>

<input  type="checkbox" name="typeList" id="zhengpin">

<label for="zhengpin">正品保障</label>

</li>

<li>

<input  type="checkbox" name="typeList" id="pinzheng">

<label for="pinzheng">电子凭证</label>

</li>

<li>

<input  type="checkbox" name="typeList" id="wangwang">

<label for="wangwang">旺旺在线</label>

</li>

<li>

<input  type="checkbox" name="typeList" id="pinpai">

<label for="pinpai">品牌授权</label>

</li>

<li>

<input  type="checkbox" name="typeList" id="pay">

<label for="pay">货到付款</label>

</li>

<li>

<input  type="checkbox" name="typeList" id="card">

<label for="card">信用卡</label>

</li>

</ul>

</form>    

</div>

</body>

</html>


0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
表单美化
  • 参与学习       41153    人
  • 解答问题       151    个

本教程讲解表单美化，主要是对方法和思路的分享，让表单与众不同

进入课程

那位大哥帮我 看下 为什么 hover没用 完全没反应

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信