我想弄清楚是否有 CSS 替代方法来使用 CSS 加号选择器,以便我的 css slider 可以在不支持加号选择器的旧版浏览器中使用。我正在寻找 CSS 替代品。但是有没有一种方法可以检测不支持 CSS 加号选择器的浏览器并使用 Jquery 替代方案我想知道如何解决这个问题,谢谢。
这是我的 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;
}
最佳答案
如果你真的想支持 IE8-(它不支持 +
选择器)我建议你使用 polyfill .
关于javascript - CSS 替代 CSS 加号选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34501716/