style.display="block"與.ame="show"設置時。第二個不出現？？？？？？？？
代碼1：<!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>
<style>
*{margin:0;padding:0;}
.content{width:960px;height:1440px;background:#ccc;color:#000;font-size:36px;text-align:center;margin:0?auto;position:relative;}
.tipCon{position:fixed;background:#efefef;color:#000;font-size:16px;text-align:center;bottom:0;right:0;}
.clickMe{height:24px;background:#CCC;line-height:24px;}
.showPic{display:none;}
.clickMe{position:relative;?}
.clickMe?a{background:url(images/icon.jpg)?no-repeat?-399px?-19px;width:16px;height:16px;display:none;position:absolute;?top:5px;?right:20px;}
.clickMe?a:hover{background-position:-343px?-19px;}
</style>
</head>
<body>
<div?class="content">網頁內容</div>
<div?class="tipCon"?id="tipCon">
??<div?class="clickMe"?id="clickMe">猜猜我有啥？<a?href="javascrip:void(0);"?id="closeBtn"></a></div>
??<div?class="showPic"?id="showPic"><img?src="images/snow.gif"?/></div>
</div>
<script>
window.onload?=?function(){
/*var?TipBox?=?document.getElementById("tipCon");
var?ClickMe?=?document.getElementById("clickMe");
var?showPic?=?document.getElementById("showPic");
var?closeBtn?=?document.getElementById("closeBtn");
ClickMe.onmouseover?=?function(){
??showPic.style.display?=?'block';
??closeBtn.style.display?=?'block';
}
closeBtn.onclick?=?function(){
showPic.style.display?=?'none';
closeBtn.style.display?=?'none';
}
*/
var?get_1?=function?(id)?{
//?獲取元素的函數
return?document.getElementById(id);
}
get_1("clickMe").onmouseover=function(){
get_1("showPic").style.display="block";
get_1("closeBtn").style.display="block";
}
get_1("closeBtn").onclick=function(){
get_1("showPic").style.display="none";
get_1("closeBtn").style.display="none";
}
}
</script>
</body>
</html>代碼2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>右下角廣告特效</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
.content{
width: 960px;
height: 1440px;
background: #ccc;
margin: 0 auto;
text-align: center;
font-size: 34px;
color: #000;
position: relative;
}
.tipCon{
position: fixed;/*對廣告進行定位*/
bottom:0;
right: 0;
font-size: 16px;
background: #efefef;
color: #000;
text-align: center;
}
.clickMe{
height: 24px;
background-color: #ccc;
line-height: 24px;
}
.showPic{
display: none; /*初始為隱藏*/
}
.clickMe{
position: relative;
}
.clickMe a{
background:url("images/icon.jpg") no-repeat -399px -19px;
width: 16px;
height: 16px;
display: none;
position: absolute;
top: 5px;
right: 5px;
}
.clickMe a:hover{
background-position: -344px -19px;
}
.show{
display: block;
}
.hide{
display: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var get_1 =function (id) {
// 獲取元素的函數
return document.getElementById(id);
}
get_1("clickMe").onmouseover=function(){
get_1("showPic").className="show";
get_1("closeBtn").className="show";
}
get_1("closeBtn").onclick=function(){
get_1("showPic").className="hide";
get_1("closeBtn").className="hide";
}
}
</script>
</head>
<body>
<div>
<img src="http://img1.sycdn.imooc.com//537d9b860001795a09601700.jpg" alt="bgphoto">
</div>
<div id="tipCon">
<div id="clickMe">
猜猜我是啥？<a href="javascript:void(0);" id="closeBtn"></a>
</div>
<div id="showPic">
<img src="http://img1.sycdn.imooc.com//537d9ad6000193e904000300.jpg" alt="adphoto"/>
</div>
</div>
</body>
</html>
為什么代碼1可以運行時出現關閉按鈕？？？但是代碼2關閉按鈕出不來？？？？？？？
2018-05-12
p{color:red;} /*權值為1*/ p span{color:green;} /*權值為1+1=2*/ .warning{color:white;} /*權值為10*/ p span.warning{color:purple;} /*權值為1+1+10=12*/ #footer .note p{color:yellow;} /*權值為100+10+1=111*/
2015-08-13
這是選擇器優先級的問題.show{display: block;} ?和.hide{display: none;}比?.clickMe a{background:url("images/icon.jpg") no-repeat -399px -19px;width: 16px;height: 16px;display: none;position: absolute;top: 5px;right: 5px;}的優先級要低，所以它會一直display: none，你可以寫成#tipCon?show{display: block;} 這樣就可以了。