有关鼠标移入div前后背景色的问题,在线等
我的问题是,在页面载入的时候,这四个div的背景色都是白色的,当鼠标移入后会有一个颜色,移出后会有另一个颜色,但是我的目的是这样的,当页面打开的时候就让四个div的背景色...
我的问题是,在页面载入的时候,这四个div的背景色都是白色的,当鼠标移入后会有一个颜色,移出后会有另一个颜色,但是我的目的是这样的,当页面打开的时候就让四个div的背景色与鼠标移入后是同一个颜色,如何实现。
目前代码如下:
<title>无标题文档</title>
<script type="text/JavaScript">
window.onload = function(){
var obj = document.getElementById('div1');
obj.onclick=function(){
window.location.href="parameter_setting.php";
}
var obj = document.getElementById('div2');
obj.onclick=function(){
window.location.href="Date_query.php";
}
var obj = document.getElementById('div3');
obj.onclick=function(){
window.location.href="daily_report.php";
}
var obj = document.getElementById('div4');
obj.onclick=function(){
window.location.href="monthly_report.php";
}
}
</script>
<style>
.change {
background-color:
#9C9
}
.normal {
background-color:
#FC0
}
.divcss_main {
margin:0 auto;
width:800px;
height:600px;
border:1px solid #F00
}
#div1 {
font-family:
"方正小标宋简体";
font-size:24px;
color:#00F;
cursor: pointer;
height:100px;
width:200px;
border:1px solid #000;
float:left;
line-height:100px;
position:absolute;
margin-top:200px;
margin-left:200px;
}
#div2 {
font-family:
"方正小标宋简体";
font-size:24px;
color:#F00;
cursor: pointer;
height:100px;
width:200px;
border:1px solid #000;
line-height:100px;
position:absolute;
margin-top:200px;
margin-left:400px;
}
#div3 {
font-family:
"方正小标宋简体";
font-size:24px;
color:#F00;
cursor: pointer;
height:100px;
width:200px;
border:1px solid #000;
float:left;
line-height:100px;
position:absolute;
margin-top:300px;
margin-left:200px;
}
#div4 {
font-family:
"方正小标宋简体";
font-size:24px;
color:#F00;
cursor: pointer;
height:100px;
width:200px;
border:1px solid #000;
line-height:100px;
position:absolute;
margin-top:300px;
margin-left:400px;
}
.divcss_copyright {
margin:0 auto;
font-family:"Times New Roman", Times, serif;
width:800px;
height:50px;
border:0px solid #000
}
</style>
</head>
<body>
<?php
session_start();//是否登陆检测
//echo $_SESSION['username'] ;
if( $_SESSION['username'] =='') {
die("<script>window.open('user_login.php','_parent');</script>");
}
?>
<div class="divcss_main" align="center">
<div id='div1' onmouseover="this.className='change'" onmouseout="this.className='normal'" >渠道信息查询设置</div>
<div id='div2' onmouseover="this.className='change'" onmouseout="this.className='normal'" >数据查询</div>
<div id='div3' onmouseover="this.className='change'" onmouseout="this.className='normal'" >日报表</div>
<div id='div4' onmouseover="this.className='change'" onmouseout="this.className='normal'" >月报表</div>
</div>
</body> 展开
目前代码如下:
<title>无标题文档</title>
<script type="text/JavaScript">
window.onload = function(){
var obj = document.getElementById('div1');
obj.onclick=function(){
window.location.href="parameter_setting.php";
}
var obj = document.getElementById('div2');
obj.onclick=function(){
window.location.href="Date_query.php";
}
var obj = document.getElementById('div3');
obj.onclick=function(){
window.location.href="daily_report.php";
}
var obj = document.getElementById('div4');
obj.onclick=function(){
window.location.href="monthly_report.php";
}
}
</script>
<style>
.change {
background-color:
#9C9
}
.normal {
background-color:
#FC0
}
.divcss_main {
margin:0 auto;
width:800px;
height:600px;
border:1px solid #F00
}
#div1 {
font-family:
"方正小标宋简体";
font-size:24px;
color:#00F;
cursor: pointer;
height:100px;
width:200px;
border:1px solid #000;
float:left;
line-height:100px;
position:absolute;
margin-top:200px;
margin-left:200px;
}
#div2 {
font-family:
"方正小标宋简体";
font-size:24px;
color:#F00;
cursor: pointer;
height:100px;
width:200px;
border:1px solid #000;
line-height:100px;
position:absolute;
margin-top:200px;
margin-left:400px;
}
#div3 {
font-family:
"方正小标宋简体";
font-size:24px;
color:#F00;
cursor: pointer;
height:100px;
width:200px;
border:1px solid #000;
float:left;
line-height:100px;
position:absolute;
margin-top:300px;
margin-left:200px;
}
#div4 {
font-family:
"方正小标宋简体";
font-size:24px;
color:#F00;
cursor: pointer;
height:100px;
width:200px;
border:1px solid #000;
line-height:100px;
position:absolute;
margin-top:300px;
margin-left:400px;
}
.divcss_copyright {
margin:0 auto;
font-family:"Times New Roman", Times, serif;
width:800px;
height:50px;
border:0px solid #000
}
</style>
</head>
<body>
<?php
session_start();//是否登陆检测
//echo $_SESSION['username'] ;
if( $_SESSION['username'] =='') {
die("<script>window.open('user_login.php','_parent');</script>");
}
?>
<div class="divcss_main" align="center">
<div id='div1' onmouseover="this.className='change'" onmouseout="this.className='normal'" >渠道信息查询设置</div>
<div id='div2' onmouseover="this.className='change'" onmouseout="this.className='normal'" >数据查询</div>
<div id='div3' onmouseover="this.className='change'" onmouseout="this.className='normal'" >日报表</div>
<div id='div4' onmouseover="this.className='change'" onmouseout="this.className='normal'" >月报表</div>
</div>
</body> 展开
2个回答
展开全部
楼主在最后加这段JS代码吧
<script>
window.onload=function(){
document.getElementById("div1").className = "normal"
document.getElementById("div2").className = "normal"
document.getElementById("div3").className = "normal"
document.getElementById("div4").className = "normal"
}
</script>
展开全部
你在你的css部分把四个div设置一个初始颜色不就ok了吗!!!加个background。。。。
追问
有那么简单就不在这里问了。
给四个div设置background后,鼠标移入移出就不会在变色。
追答
id的权限大于class,所以设置后就不变了,,把他们都改为class就ok了。。。
无标题文档
.div1{
width:100px;
height:100px;
background:#acb;
}
.change{
width:100px;
height:100px;
background:red;
}
.normal{
width:100px;
height:100px;
background:#acb;
}
渠道信息查询设置
这个就没错,可以实现。。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询