純CSS圖像滑塊

Question

<!DOCTYPE html>
<html>
<head>
<style>
html,body{
height:100%;
width:100%;
margin:0%;
Padding:0%;
}
.wrap{
height:100%;
width:100%;
position:relative;
overflow:hidden;
background:#120103;
color:#fff;
text-align:center;
}
header{
    background:#3E474F;
    box-shadow:0 .5em 1em #111;
    position:absolute;
    z-index:900;
    width:100%;
}
header label{
    color:#788188;
    cursor:pointer;
    display:inline-block;
    line-height:4.25em;
    font-size:.667em;
    font-weight:bold;
    padding:0 1em;
}
header label:hover{
    background:#2e353b;
}

.slide{
    width:100%;
    height:100%;
    position:absolute;
    top:0%;
    left:100%;
    z-index:10;
    padding:8em 1em 0;
    background-color:#120103;
    background-position:50% 50%;
    background-size:cover;
    transition:left 0s .75s;
}


[id^= "slide"]:checked + .slide{
    left:0;
    z-index:100;
    transition:left .65s ease-out;
}

 img{
     height:250px;
     width:250px;
    Margin:20px;
    Overflow:none;
    display:block;
    }
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}

.slide-one:hover .overlay{
opacity:0.5;
}

.slide-two:hover .overlay{
opacity:0.5;
}

.slide-three:hover .overlay{
opacity:0.5;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slide-one{
background-image:url('wow.jpg');
}
.slide-two{
background-image:url('Anonymous.jpg ');
}
.slide-three{
background-image:url('1.jpg');
}
</style>
</head>
<body>
<div class="wrap">
<header>
<label for="slide-1-trigger">Slide One</label>
<label for="slide-2-trigger">Slide Two</label>
<label for="slide-3-trigger">Slide Three</label>
</header>
<input id="slide-1-trigger" type="radio" name="slide" checked>
<section class="slide slide-one">

<div class="overlay">
<div class="text">Ethical Hacking is licensed hacking.... <a 
href="https://en.wikipedia.org/wiki/Certified_Ethical_Hacker">Read More</a>
</div>
</div>
</section>
<input id="slide-2-trigger" type="radio" name="slide" >
<section class="slide slide-two" >
<div class='overlay'>
<div class="text">A rather famous group of hackers and tech savvys spread 
across the world....<a 
href="https://en.wikipedia.org/wiki/Anonymous_(group)">Read More</a></div>
</div>
</section>
<input id="slide-3-trigger" type="radio" name="slide" >
<section class="slide slide-three" >
<div class='overlay'>
<div class="text">Just Checking</div>
</div>
</div>
</body>
</html>

大家好，觀看完整個視頻后，我正在觀看有關制作CSS圖像滑塊的視頻，但是我在編寫上述代碼時遇到了一些問題：

[id^= "slide"]:checked + .slide{
    left:0;
    z-index:100;
    transition:left .65s ease-out;
}

我需要幫助來理解代碼的這一部分。 預先感謝您的幫助:)

Answer 1

首先，您似乎似乎了解CSS的基本原理，但是如果我錯了卻沒有錯，我建議MDN關於CSS的工作原理和語法的教程。

所以一點一點...

1. `[id^= "slide"]:checked + .slide`

這是選擇器，由兩個主要部分組成： [id^= "slide"]:checked和.slide ，由+號連接。 我假設您知道.slide是什么意思。 如果沒有，您應該閱讀我上面發布的文章。

1.1。 `+`

具有x + y語法的+運算符選擇將由純y選擇的所有元素，但將選擇范圍限制為僅直接位於將由x選擇的其他元素之后的那些元素。 所以，如果你有.a + .b那么你得到與類的所有元素b的元素之前直接與類a ：

 div { border: 1px dashed black; padding: 1em; margin: 1em; } .wupwupwup + .nanana { background: red; }

 This selects all .nanana directly after .wupwupwup. <div class="nanana wupwupwup">This is not selected because there is no .wupwupwup before.</div> <div class="wupwupwup">This is not selected because it has no .nanana class</div> <div class="nanana">This is selected because it has .wupwupwup before and itself matches .nanana</div> <div>This is not selected because it does not match .nanana and also because the previous element does not match .wupwupwup</div>

1.2。 `[id^="slide"]:checked`

這又由兩個選擇器組成： [id^="slide"]和:checked 。 :checked的解釋非常簡單： x:checked選擇所有與x匹配的元素，只要它們被“選中”即可。 例如，如果元素是復選框或單選按鈕並被選中，則將其“選中”。 因此，在這種情況下，我們現在需要檢查x [id^="slide"] 。 這是一個選擇器，用於選擇所有具有id以slide開頭的屬性id元素。 所以它會選擇具有類似ID的所有元素slide ， slide-1-trigger ， slide-2-trigger ， slider ，等等。

那么什么整個[id^= "slide"]:checked + .slide確實可以這樣解釋：它選擇與類的所有元素slide直接跟隨一個“選中”與開頭的ID元件slide 。

就您而言...

...這意味着，例如元素<section class="slide slide-one">在選中<input id="slide-1-trigger" type="radio" name="slide" checked>已選擇。

2.規則

{
    left:0;
    z-index:100;
    transition:left .65s ease-out;
}

首先，您可以閱讀有關 MDN 過渡的信息。 你的轉變通常做的就是：使屬性的改變left到值0光滑的0.65秒。 在此過程中，它巧妙地使用了一種特殊的緩動功能，稱為緩和功能ease-out但是您可以忽略它而不會產生明顯的差異。 z-index為100 ，此當前幻燈片位於最上方，因此不會隱藏在其他幻燈片后面。

另一件事 ...

...您可能已經錯過了：如果單擊標簽，則使用的<label ...>元素會將相應的<input ...>元素標記為已checked 。 這就是為什么它們的狀態改變，然后:checked選擇器生效的原因。

Answer 2

:checked是一個CSS偽類選擇器，它代表已選中/單擊的所有單選，復選框或選項。 CSS的該段僅針對任何滑動觸發的id，並在:checked偽類處於活動狀態時向左執行過渡。 希望對您有所幫助

純CSS圖像滑塊

問題描述

2 個解決方案

解決方案1
1 2017-05-06 15:22:59

1. `[id^= "slide"]:checked + .slide`

1.1。 `+`

1.2。 `[id^="slide"]:checked`

就您而言...

2.規則

另一件事 ...

解決方案2
0 2017-05-06 12:04:58

純CSS圖像滑塊

問題描述

2 個解決方案

解決方案1 1 2017-05-06 15:22:59

1. [id^= "slide"]:checked + .slide

1.1。 +

1.2。 [id^="slide"]:checked

就您而言...

2.規則

另一件事 ...

解決方案2 0 2017-05-06 12:04:58

解決方案1
1 2017-05-06 15:22:59

1. `[id^= "slide"]:checked + .slide`

1.1。 `+`

1.2。 `[id^="slide"]:checked`

解決方案2
0 2017-05-06 12:04:58