2015-12-28 34 views
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; 
} 
+4

比IE7老,真的嗎? – Roope

+0

@Roope我只是好奇,因爲有些人喜歡舊瀏覽器,打我爲什麼。 – linkNES

+4

@linkNES大約兩週後,微軟將不再支持ie10及以下版本https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support –

回答

0

如果你真的想支持IE8-(不支持+選擇)我建議你使用polyfill