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>
复选框 选中的要一直显示 没选中的移入显示移出隐藏 展开
好使定好评！！！！
<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个回答
展开全部
<!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>
更多追问追答
追问
亲 啥子都不见了哇！！！！
追答
!!!
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<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标签内
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
