<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jquery 項目</title> <script src="jquery.min.js"></script> <style type="text/css"> .all{ padding:0; text-align:center; width:841px; height:363px; margin-left:auto; margin-right:auto; overflow:hidden; position:relative; } .amg{ width:2600px; height:363px; position:absolute; left:872px; } .all img{ cursor: pointer; } .bn{ /*z-index僅在定位中起作用*/ position:absolute; /*在定位的標籤裏面的元素也需要使用定位，否則會被定位的元素覆蓋導致不顯示*/ margin-top:320px; margin-left:740px; } .a,#b,#c{ background:rgba(49, 49, 37, 0.66); color:#fff; } .bn .a:hover{ background:rgb(187, 182, 26); color:green; cursor:pointer; font-size:18px; } .bn #b:hover{ background:rgb(187, 182, 26); color:green; cursor:pointer; font-size:18px; } div .bn #c:hover{ background:rgb(187, 182, 26); color:green; cursor:pointer; font-size:18px; } .bbn{ background:rgb(187, 182, 26); color:green; } </style> </head> <body> <div class="all"> <div class="amg"> <img id="one" src="../images/2.png" /> <img id="two" src="../images/3.jpg" /> <img id="three" src="../images/4.jpg" /> </div> <div class="bn"> <a><button class="a" type="button">1</button></a><!--注意：如果不需要連接，一定要把href屬性去掉，否則會出錯。--> <a><button id="b" type="button">2</button></a> <a><button id="c" type="button">3</button></a> </div> </div> <script> $(document).ready(function(){ // $("#a").css({"background":"rgb(187, 182, 26)","color":"green"}); $(".a").addClass("bbn"); /*wh:注意此處如果a爲id，可以用$("#a").css(),但是不能用$("#a").addClass("bbn")，addClass()的效果會被上面#a的效果覆蓋 原因是id的優先級大於class，所以class的效果會被覆蓋（通常用1表示標籤名選擇器的優先級，用10表示類選擇器的優先級，用100標示ID選擇器的優先級。 標籤內引入CSS的方式來寫CSS，此時的優先級是最高的，爲1000),但是可以使用$("#a").css()，因爲此時的css相當於在標籤內引入css，優先級最高，所以 效果不會被覆蓋*/ // $("#a").addClass("bbn"); $(".amg").animate({"left":"0"},500); $("#b").click(function(){ $(".amg").animate({"left":"-872px"},500);//向左滑動效果 $("#b").css({"background":"rgb(187, 182, 26)","color":"green"}); // $("#b").addClass("bn"); $(".a,#c").css({"background":"rgba(49, 49, 37, 0.66)","color":"#fff"}); //$加多個id或者class時用逗號隔開，多個css用大括號，中間用逗號隔開 }); $("#c").click(function(){ $(".amg").animate({"left":"-1744px"},500); $("#c").css({"background":"rgb(187, 182, 26)","color":"green"}); $(".a,#b").css({"background":"rgba(49, 49, 37, 0.66)","color":"#fff"}); }); $(".a").click(function(){ $(".amg").animate({"left":"0"},500); $(".a").css({"background":"rgb(187, 182, 26)","color":"green"}); $("#b,#c").css({"background":"rgba(49, 49, 37, 0.66)","color":"#fff"}); }); }) </script>
css的有關優先級的一個問題
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
position:absolute下，top:0,right:0,bottom:0,left:0 結合margin:auto的作用（讓明確寬高的盒子水平垂直居中於父元素）
絕對定位 + margin，讓明確寬高的盒子水平垂直居中於窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="vie
幾個簡單的css動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi