0
我想弄清楚是否有一個CSS替代使用CSS加號選擇器,以便我的css滑塊可以在不支持加號選擇器的舊版瀏覽器中使用。我正在尋找一個CSS替代方案。但是有沒有辦法來檢測不支持CSS加號選擇器並使用Jquery替代方法的瀏覽器?我想知道如何去解決這個問題。CSS加號符號選擇器的替代方案?
這裏是我的jsfiddle例如鏈接https://jsfiddle.net/2hmb60w0/
HTML
<form class="sliders">
<input type="radio" name="slider-choice" id="first-slider" checked />
<div class="slider-container">
<div class="slider">
<p>Some Random Text...</p>
</div>
<div class="nav">
<label for="second-slider" class="prev"></label>
<label for="second-slider" class="next"></label>
</div>
</div>
<input type="radio" name="slider-choice" id="second-slider" />
<div class="slider-container">
<div class="slider">
<p>Even Some More Random Text...</p>
</div>
<div class="nav">
<label for="first-slider" class="prev"></label>
<label for="first-slider" class="next"></label>
</div>
</div>
</form>
CSS
.sliders {
width: 600px;
position: relative;
}
.sliders input{
display: none;
}
.slider {
position: absolute;
opacity: 0;
width: 600px;
transform: scale(0);
transition: all .6s ease-in-out;
}
.nav label {
margin-top: 65px;
width: 85px;
display: none;
position: absolute;
opacity: 0;
cursor: pointer;
transition: opacity .2s;
color: black;
font-size: 6em;
text-align: center;
background-color: rgba(100, 100, 100, .6);
}
.slider:hover + .nav label, .slider:focus + .nav label{
opacity: 0.6;
}
.nav label:hover, .nav label:focus{
opacity: 1;
}
.nav .next{
right: 0;
}
.prev:before{
content: '\2770';
}
.next:before{
content: '\2771';
}
input:checked + .slider-container .slider{
opacity: 1;
transform: scale(1);
transition: opacity 2s ease-in-out;
}
input:checked + .slider-container .nav label{
display: block;
}
p{
padding: 100px 20px;
width: 560px;
text-align: center;
background: #dae1ef;
}
比IE7老,真的嗎? – Roope
@Roope我只是好奇,因爲有些人喜歡舊瀏覽器,打我爲什麼。 – linkNES
@linkNES大約兩週後,微軟將不再支持ie10及以下版本https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support –