我有一个纯 CSS slider ,其中有几个点指示器显示我在哪张幻灯片上。但我还有另一组位于 slider 之外的数字指示器,我想更改它们的颜色。
我的工作指标 CSS 示例:
input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3 {
background: rgba(0, 0, 0, 0.8);
}
并且此代码不起作用:
input#img-1:checked ~ #title label#slide-link-1,
input#img-2:checked ~ #title label#slide-link-2,
input#img-3:checked ~ #title label#slide-link-3 {
color: red;
}
也可能超过三张幻灯片。请看看我的代码笔:http://codepen.io/anon/pen/ZbPvde
有没有办法用 CSS 实现它,或者请帮我弄清楚如何用 jQuery 完成它。非常感谢。
最佳答案
您实际上使用的是 ID 而不是类,因此您只能使用#img-dot-1、#img-dot-2、#img-dot-3 一次(与#slide 相同-link) 在你的整个 html 页面中。 因此,您可以直接访问它们:
#img-dot-1,
#img-dot-2,
#img-dot-3 {
background: rgba(0, 0, 0, 0.8);
}
#slide-link-1,
#slide-link-2,
#slide-link-3 {
color: red;
}
如果 color:red 仍然无效,请尝试:
#slide-link-1,
#slide-link-2,
#slide-link-3 {
color: red !important;
}
这可能是由于一些附加到内部元素的代码造成的。
编辑:我添加以下屏幕截图以显示更好地工作的功能:
编辑 2:
正如您希望您的代码更改当前幻灯片编号,我做了下一步来实现它:
我添加了下一个 CSS:
.red {
color: red;
}
#img-dot-1,
#img-dot-2,
#img-dot-3 {
background: rgba(0, 0, 0, 0.8);
}
然后我将值添加到复选框中,如下所示:
<input type="radio" name="radio-btn" id="img-2" value="2" />
然后我添加了 JQuery 和下一个脚本以使其工作:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function select(i)
{
$("#slide-link-1").removeClass("red");
$("#slide-link-2").removeClass("red");
$("#slide-link-3").removeClass("red");
$("#slide-link-"+i).addClass("red");
}
$("input[type='radio']").change(function()
{
select($(this).val());
});
</script>
如果你想让它以红色开始,添加:
$("#slide-link-1").addClass('red')
到脚本部分。
关于jquery - 将样式应用于 slider 外部的单独元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33792359/