div div下的CSS div

我對CSS不熟練，這是我的第一個項目之一。我試圖做一個CSS樣式滑塊我有，我想是這樣的：div div下的CSS div

Image Slider

我已經成功地取得了內部的div和按鈕的div，但什麼麻煩我是索引順序用於滑塊上的下一個/上一個按鈕。下面是HTML：

<div class="slider"> 
<div><a href="#" id="rhandle">&gt;</a></div> 
<div><a href="#" id="lhandle">&lt;</a></div> 
<div id="loadingBar"></div> 
<div class="slide"> 
    <div id="leftSlide"> 
     <h1>WhiteFox Template</h1> 
     <p>Buy this theme today with all features, All fonts included in this theme are for personal use only. <br />Detailed documentation included.</p> 
     <a href="#" class="button">Read More</a> 
    </div> 
    <div id="rightSlide"> 
     <img src="images/slides/slide-1.gif" width="259" height="184" alt="slide-1 Image" /> 
    </div> 
    <div style="height:0;line-height:0;display:block;clear:both;"></div> 
</div>

，這裏是滑塊的CSS：

.slider { 
height: 329px; 
width: 794px; 
background: #313131; 
margin: 50px auto 80px; 
color: #FFF; 
} 

.slider a#lhandle { 
    font-size: 24px; 
    color: #FFF; 
    background: #4bacfd; 
    width: 50px; 
    float: left; 
    height: 23px; 
    padding-top: 150px; 
    padding-bottom: 150px; 
    margin-top: 6px; 
} 

.slider a#rhandle { 
    font-size: 24px; 
    color: #FFF; 
    background: #4bacfd; 
    width: 50px; 
    float: right; 
    height: 23px; 
    padding-top: 150px; 
    padding-bottom: 150px; 
    margin-top: 6px; 
} 

.slider a#lhandle:hover, 
.slider a#rhandle:hover { 
    color: #4bacfd; 
    background: #FFF; 
    border: 1px solid #4bacfd; 
    width: 48px; 
    height: 21px; 
} 

.slider #loadingBar { 
    background: #a0a0a0; 
    height: 6px; 
} 

.slider .slide { 
    height: 328px; 
    width: 793px; 
    position: relative; 
} 



.slider .slide h1 { 
    text-transform: uppercase; 
    font-size: 24px; 
    font-weight: bold; 
    margin-top: 50px; 
    margin-bottom: 25px; 
} 

.slider .slide div#leftSlide { 
    float: left; 
    width: 400px; 
    height: 328px; 
} 


.slider .slide div#rightSlide { 
    float: right; 
    height: 328px; 
    width: 280px; 
} 

.slider .slide img { 
    border: 1px solid #FFF; 
    margin-top: 25%; 
    margin-bottom: 25%; 
} 

.slider .slide p { 
    display: block; 
    text-align: justify; 
    margin-bottom: 30px; 
    margin-right: 30px; 
    margin-left: 30px; 
    font-size: 18px; 
    line-height: 28px; 
}

這樣，下/上一個按鈕的實際內容下面，當你將鼠標懸停在他們之上，他們不會變成「：懸停」式。我嘗試添加一個「z-index：5」屬性，但那不起作用，我該如何實現這一點（如果有更簡單的方法，請告訴我）。

來源

2012-07-25 Evandro Silva

z-index將工作，你只需要設置一個position而不是static（這是默認值）。

添加到您的把手兩邊：

z-index:10; 
position:relative;

演示：http://jsfiddle.net/QYnVc/

附註：您可以通過使用類似的共同要素類名稱或者裁減了大量的多餘的CSS，或者對一組CSS屬性使用多個選擇器。例如：

#rhandle, 
#lhandle { 
    font-size: 24px; 
    color: #FFF; 
    background: #4bacfd; 
    width: 50px; 
    float: left; 
    height: 23px; 
    padding-top: 150px; 
    padding-bottom: 150px; 
    margin-top: 6px; 
    z-index:10; 
    position:relative; 
} 

#rhandle { 
    float: right; 
}

來源

2012-07-25 18:45:38

謝謝，也許這就是爲什麼z-index從未起作用。：D – 2012-07-26 12:53:43

它會正常工作與z-index不過的z-index只對定位的元素有效的，所以你也需要position:relative添加類似的手柄。

jsFiddle example

CSS：

.slider a#lhandle { 
    font-size: 24px; 
    color: #FFF; 
    background: #4bacfd; 
    width: 50px; 
    float: left; 
    height: 23px; 
    padding-top: 150px; 
    padding-bottom: 150px; 
    margin-top: 6px; 
    position:relative; 
    z-index:10; 
} 

.slider a#rhandle { 
    font-size: 24px; 
    color: #FFF; 
    background: #4bacfd; 
    width: 50px; 
    float: right; 
    height: 23px; 
    padding-top: 150px; 
    padding-bottom: 150px; 
    margin-top: 6px; 
    position:relative; 
    z-index:10; 
}

在一個側面說明，你可能要重新考慮你是如何奠定了我們的幻燈片，因爲似乎是一個多餘的元素和CSS。

來源

2012-07-25 18:46:15 j08691

謝謝，我現在正在使用Dreamweaver，我急於做到這一點，並沒有修復代碼。感謝您的提示！ :) – 2012-07-26 12:50:54

根據W3schools，所述z索引屬性才能正常運行，當受影響的項的位置屬性被設置爲絕對，相對或固定。

使用這些屬性，您可能必須重新定位使用左/* *權和頂部/* *底部性質的項目。

來源

2012-07-25 18:46:46 wintermute

我已經通過W3schools，並沒有注意到大**注**。謝謝你的提示。 – 2012-07-26 12:55:02

div div下的CSS div

回答

相關問題