javascript 鼠标移入隐藏层显示，移出图层隐藏

求大神帮忙！！！想让鼠标移到图片上时，复选框display：block，鼠标移出图片时，复选框display：none；点击复选框全选的时候，所有复选框选中，点击其他复选... 求大神帮忙！！！想让鼠标移到图片上时，复选框display：block，鼠标移出图片时，复选框display：none；点击复选框全选的时候，所有复选框选中，点击其他复选框时，只选中一个，刷新后不要全选
好使定好评！！！！
<style>
.one{ width:188px; height:200px; float:left; border:1px #CCC solid; margin:5px;}
.xuan{ float:left; position:absolute; margin-top:-140px; margin-left:166px;}
.one p{ font-size:12px; margin-right:10px; margin-top:5px; line-height:16px; float:left;}
.one .tu{ width:188px; height:140px; border:1px #CCC solid;}
.di{ clear:both; margin:0 auto; padding-top:20px; width:100px;}
</style>

<div class="one">
<div class="tu"><img src="images/06.jpg"/></div>
<div class="xuan" style=" display:none;"><input name="" type="checkbox" /></div>
<p class="xinxi">文字，题目，时间</p>
</div>
<div class="one">
<div class="tu"><img src="images/06.jpg"/></div>
<div class="xuan" style=" display:none;"><input name="" type="checkbox" /></div>
<p class="xinxi">文字，题目，时间</p>
</div>
<div class="di">
<input name="" type="checkbox"/>全选
<input type="button" value="删除">
</div>
复选框选中的要一直显示没选中的移入显示移出隐藏展开

 我来答

2个回答

#热议# 上班途中天气原因受伤算工伤吗？

zhou2003737
推荐于2016-09-26 · TA获得超过1427个赞

知道小有建树答主

回答量：1082

采纳率：77%

帮助的人：400万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
           var div = document.getElementsByClassName("one");
            for(var i =0;i<div.length;i++){
                div[i].onmouseover = function(e){
                        var xuan = this.getElementsByClassName("xuan")[0];
                        xuan.style.display = "block";
                };
                div[i].onmouseout = function(e){
                        var xuan = this.getElementsByClassName("xuan")[0];
                        xuan.style.display = "none";
                };
            }
            document.getElementsByClassName("di")[0].querySelector("input[type=checkbox]").onclick = function(){
                var checkbox = document.querySelectorAll("input[name=checkbox]");

                    if(this.checked ==true){
                        for(var i =0;i<checkbox.length;i++){
                            checkbox[i].checked =true;
                        }
                    }else{
                        for(var i =0;i<checkbox.length;i++) {
                            checkbox[i].checked = false;
                        }
                }

            }
        };


    </script>
    <style>
        .one{ width:188px; height:200px; float:left; border:1px #CCC solid; margin:5px;}
        .xuan{ float:left; position:absolute; margin-top:-140px; margin-left:166px;}
        .one p{ font-size:12px; margin-right:10px; margin-top:5px; line-height:16px; float:left;}
        .one .tu{ width:188px; height:140px; border:1px #CCC solid;}
        .one .tu img{width: 188px;height: 140px;}
        .di{ clear:both; margin:0 auto; padding-top:20px; width:100px;}
    </style>

</head>
<body>

<div class="one">
    <div class="tu"><img src="img7.jpg" /></div>
    <div class="xuan" style=" display:none;"><input name="checkbox" type="checkbox" /></div>
    <p class="xinxi">文字，题目，时间</p>
</div>
<div class="one">
    <div class="tu"><img src="img10.jpg"/></div>
    <div class="xuan" style=" display:none;"><input name="checkbox" type="checkbox" /></div>
    <p class="xinxi">文字，题目，时间</p>
</div>
<div class="di">
    <input name="" type="checkbox"/>全选
    <input type="button" value="删除">
</div>
</body>
</html>

更多追问追答
追问

亲   啥子都不见了哇！！！！
追答

!!!
追问

楼下做的   鼠标滑过是好使的， 全选也是好使的，但是不能多选~~~被选中的也没有一直显示~~~~
追答

我的可以啊。我测试过的。你将图片改下呀。
追问

你的只有  鼠标滑过是好使的    全选都不好使  选中的也没有显示~~~~
追答

你什么浏览器？我在IE 11，ff chrome opera 下都测试通过。。神奇。。
追问
所有浏览器   都要测试
360
猎豹
火狐
谷歌
IE8以上
...............
先把猎豹弄好使了吧


追答

不玩了。
追问

帮帮我吧~~~~我是js小白   什么都不会~~~~
追答

我总感觉你的需求不明确。我花时间做了那么多，到头来还不对。
追问
明确啊   
鼠标移入图片  显示复选框，鼠标移出隐藏复选框
点击全选的时候所有复选框选中，不点全选所有复选框都没选中，刷新后所有复选框都没选中，点击全选后，点击其他一个复选框时，全选消失，只选中点的那个
被选中的复选框一直显示，不隐藏，没选中的复选框继续鼠标经过显示、隐藏
如果可以  点击删除的时候弹出框   “您选择的内容即将删除你  确定  取消  ”
如果不帮忙  做好前三个要求也行
追答
超出文字限制！我以附件形式上传。

追问

对对对！！！！就是这种效果    亲你太厉害了！！！！

已赞过 已踩过<

评论收起

Ni_KiTa__
2014-10-15 · 超过20用户采纳过TA的回答

知道答主

回答量：70

采纳率：0%

帮助的人：46万

我也去答题访问个人页

关注

展开全部

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> 
<script>
$(".di input:checkbox, .xuan input").attr("checked",false);
$(".one").hover(function(){
    $(this).find(".xuan").show();
},function(){
    $(".xuan").hide();
})
$(".xuan input").click(function(){
    $(".di input:checkbox, .xuan input").attr("checked",false);
    $(this).attr("checked",true);
})
$(".di input:checkbox").click(function(){
    if($(this).is(':checked')){
        $(".xuan").show();
        $(".xuan input").attr("checked",true);
    }else{
        $(".xuan").hide();
        $(".xuan input").attr("checked",false);
    }
})
</script>

更多追问追答
追问

亲   加载变慢了   还不好使额~~~~~~~~~没反应~~~，能不能帮帮忙啊    急急急！！！！555555555555555555555555555没反应~~~~~~~~~
追答
<script>
$(function(){
    $(".di input:checkbox, .xuan input").attr("checked",false);
    $(".one").hover(function(){
        $(this).find(".xuan").show();
    },function(){
        $(".xuan").hide();
    })
    $(".xuan input").click(function(){
        $(".di input:checkbox, .xuan input").attr("checked",false);
        $(this).attr("checked",true);
    })
    $(".di input:checkbox").click(function(){
        if($(this).is(':checked')){
            $(".xuan").show();
            $(".xuan input").attr("checked",true);
        }else{
            $(".xuan").hide();
            $(".xuan input").attr("checked",false);
        }
    })
})
</script>

这段代码是在线jquery。<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
你直接去掉，用你本地的就可以了。或者把这个放到head标签内
追问

加载快了   但是一直不好使   鼠标怎么移入移出都没反应~~~~.................
追答
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

<html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> 
    <style>
        样式
    </style>
   </head>
 <body>
 <div>
     内容
 </div>
 </body>
</html>
<script>
$(function(){
    $(".di input:checkbox, .xuan input").attr("checked",false);
    $(".one").hover(function(){
        $(this).find(".xuan").show();
    },function(){
        $(".xuan").hide();
    })
    $(".xuan input").click(function(){
        $(".di input:checkbox, .xuan input").attr("checked",false);
        $(this).attr("checked",true);
    })
    $(".di input:checkbox").click(function(){
        if($(this).is(':checked')){
            $(".xuan").show();
            $(".xuan input").attr("checked",true);
        }else{
            $(".xuan").hide();
            $(".xuan input").attr("checked",false);
        }
    })
})
</script>参照这个布局。
追问

我是js小白~~~~愁死了~~~今天的任务没完成.............又该挨训了5555555555555555
追答

还没搞定？？？
追问

大神辛苦，不过不好使，老师的讲法和你的不一样    我能听懂但就是不会做，不知道从何开始，怎么做
大神给js把复选框都变成单选框了，不能多选了，而且点击过后的要一直显示出来不然怎么知道哪个被选中了是不？？？没选中的可以继续mouseover，mouseout

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

javascript 鼠标移入隐藏层显示，移出图层隐藏

其他类似问题

为你推荐：