我有一個問題,因爲主題名稱說:可以說我有4張照片在網站上,他們已經設置z-index在這個div中的所有圖像。無論如何,我想讓我的行動擴大點擊圖像,強制其餘圖像的Z指數下降(因爲我在黑色背景中使用褪色作爲圖像視圖的一部分)jquery,交換除了採取行動之外的所有元素的z-index
在此先感謝
<div id="main">
<div id="masthead">
<a href="#">click</a> </div>
<div id="top_nav">
<a href="http://www.google.pl">Start</a> <a href="http://www.google.pl">
Opis</a> <a href="http://www.google.pl">Projekty</a>
<a href="http://www.google.pl">Zdjecia</a>
<a href="http://www.google.pl">Linki</a> <a href="http://www.google.pl">
Kontakt</a> </div>
<div id="content">
<div id="textfield"> <p>Profesjonalny web design. </p>
<span id="left"><a href="#">←</a></span>
<span id="right"><a href="#">→</a></span>
</div>
<img id="second" src="model.jpg" alt="model" />
<img id="third" src="model.jpg" alt="model" />
<img id="fourth" src="model.jpg" alt="model" />
<img id="first" src="model.jpg" alt="model" />
</div>
<div id="box"></div>
</div>
<div id="blackb"></div>
CSS
body {
margin: 0;
padding: 0;
font-family: Verdana;
background: silver url(bodygrad2.jpg) fixed;;
}
#main {
width: 1280px;
margin: 0 auto;
padding-bottom: 10px;
}
#masthead {
height: 40px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(gray), to(black));
opacity: 0.3;
margin-bottom: 4px;
color: white;
text-align: center;
padding-top: 20px;
}
#masthead a{
color: white;
display: block;
text-decoration: none;
}
#masthead a:hover{
color: #FFFF66;
display: block;
text-decoration: none;
}
#top_nav {
width: 100%;
background: transparent;
border-bottom: 1px solid #BFBB04;
}
#top_nav a {
text-decoration: none;
color: #a7a236;
font-family: GraublauWeb; /* "Brush Script Std"; */
font-size: 120%;
padding: 0 5px;
}
#top_nav a:hover {
color: #cfc944;
}
#content {
height: 20px;
width: 1px;
background: gray url(content.jpg) 0 0 no-repeat;
}
#content div#textfield{
display: none;
position: absolute;
top: 15%;
right: 104px;
width: 310px;
height: 200px;
border-bottom: 1px solid black;
border-right: 1px solid black;
background: #484B55;
color: #CCCCCC;
opacity: 0.5;
z-index: 9;
}
#content div#textfield p{
margin: 10px;
}
#content span#left{
display: block;
position: absolute;
bottom: 0;
left: 0;
}
#content span#right{
display: block;
position: absolute;
bottom: 0;
right: 0;
}
#content span a{
text-decoration: none;
color: #CCCCCC;
}
#content img {
position: absolute;
top: 50%;
right: 50%;
display: none;
width: 160px;
height: 116px;
border: 2px solid white;
z-index: 10;
}
#content img:hover {
width: 164px;
height: 120px;
opacity: 0.9;
}
#content img#second {
right: 35%;
}
#content img#third {
right: 20%;
}
#content img#fourth {
right: 5%;
}
#footer {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
background: #ECE7E6;
border-top: 1px solid #BBBFC8;
font: 80% italic Arial,Verdana, sans-serif;
color: silver;
line-height: 1em;
padding-bottom: 0.1em;
z-index: 15;
}
#box {
position: absolute;
top: 40px;
left: 0;
width: 60px;
height: 60px;
background: red;
opacity: 0.5;
z-index: 6;
}
#blackb{
display: none;
position: absolute;
top: 0;
width: 1280px;
height: 888px;
background: black;
opacity: 0.7;
z-index: 9;
}
你應該發佈你的html。 – Sarfraz 2010-08-11 10:50:57