- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在幻灯片处于事件状态时更改指示器颜色。因此,当您单击指示器时,幻灯片会发生变化,但指示器不会改变颜色。我只将 .bar:hover 的边框颜色设置为白色。我也试过 :active :checked 但没有任何效果......但我不知道该怎么做。
轮播 HTML:
<div class="slidershow center">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<input type="radio" name="r" id="r5">
<input type="radio" name="r" id="r6">
<input type="radio" name="r" id="r7">
<div class="slida s1 img-magnifier-container">
<img id="myimage" src="carousel/01.png">
</div>
<div class="slida img-magnifier-container">
<img id="myimage2" src="carousel/02.png" alt="">
</div>
<div class="slida img-magnifier-container">
<img id="myimage3" src="carousel/03.png" alt="">
</div>
<div class="slida img-magnifier-container">
<img id="myimage4" src="carousel/04.png" alt="">
</div>
<div class="slida img-magnifier-container">
<img id="myimage5" src="carousel/05.png" alt="">
</div>
<div class="slida img-magnifier-container">
<img id="myimage6" src="carousel/06.png" alt="">
</div>
<div class="slida img-magnifier-container">
<img id="myimage7" src="carousel/07.png" alt="">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
<label for="r6" class="bar"></label>
<label for="r7" class="bar"></label>
</div>
</div>
轮播 CSS:
.slidershow {
width: 100%;
height: 100%;
overflow: hidden;
}
.center {
transform: translate (-50% , -50%);
}
.navigation {
position: relative;
bottom: 0;
left: 32%;
transform: translateX (-50%);
display: flex;
z-index: 999;
}
@media screen and (max-width: 768px) {
.slidershow {
display: none;
}
}
.bar {
width: 50px;
height: 1px;
border: 2px solid grey;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover {
border-color: white;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
.slides {
width: 1000%;
height: 100%;
display: flex;
}
.slida {
width: 10%;
transition: 0.6s;
}
.slida img {
width: 100%;
height: 100%;
}
#r1:checked ~ .s1 {
margin-left: 0;
}
#r2:checked ~ .s1 {
margin-left: -10%;
}
#r3:checked ~ .s1 {
margin-left: -20%;
}
#r4:checked ~ .s1 {
margin-left: -30%;
}
#r5:checked ~ .s1 {
margin-left: -40%;
}
#r6:checked ~ .s1 {
margin-left: -50%;
}
#r7:checked ~ .s1 {
margin-left: -60%;
}
.carousel img {
width: 100%;
}
最佳答案
希望我理解正确。只需添加此脚本:
let bar = document.querySelectorAll('.bar');
let select_bar = (event) => {
[...bar].forEach(link => link.classList.remove('active_bar'));
event.target.classList.add('active_bar');
}
[...bar].forEach(e => e.addEventListener('click', select_bar));
并将此选择器添加到您的 css(您可以为事件栏制定自己的样式规则):
.active_bar {
border: 2px solid red;
background-color: red;
}
有必要吗?
let bar = document.querySelectorAll('.bar');
let select_bar = (event) => {
[...bar].forEach(link => link.classList.remove('active_bar'));
event.target.classList.add('active_bar');
}
[...bar].forEach(e => e.addEventListener('click', select_bar));
.slidershow {
width: 100%;
height: 100%;
overflow: hidden;
}
.center {
transform: translate (-50% , -50%);
}
.navigation {
position: relative;
bottom: 0;
left: 32%;
transform: translateX (-50%);
display: flex;
z-index: 999;
}
@media screen and (max-width: 768px) {
.slidershow {
display: none;
}
}
.bar {
width: 50px;
height: 1px;
border: 2px solid grey;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.active_bar {
border: 2px solid red;
background-color: red;
}
.bar:hover {
border-color: white;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
.slides {
width: 1000%;
height: 100%;
display: flex;
}
.slida {
width: 10%;
transition: 0.6s;
}
.slida img {
width: 100%;
height: 100%;
}
#r1:checked ~ .s1 {
margin-left: 0;
}
#r2:checked ~ .s1 {
margin-left: -10%;
}
#r3:checked ~ .s1 {
margin-left: -20%;
}
#r4:checked ~ .s1 {
margin-left: -30%;
}
#r5:checked ~ .s1 {
margin-left: -40%;
}
#r6:checked ~ .s1 {
margin-left: -50%;
}
#r7:checked ~ .s1 {
margin-left: -60%;
}
.carousel img {
width: 100%;
}
<div class="slidershow center">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<input type="radio" name="r" id="r5">
<input type="radio" name="r" id="r6">
<input type="radio" name="r" id="r7">
<div class="slida s1 img-magnifier-container">
<img id="myimage" src="https://sun9-69.userapi.com/impf/c824201/v824201969/17341f/IfCwbiGRL7c.jpg?size=200x0&quality=90&crop=0,0,500,588&sign=9b4d43be2be378401d5bec41a9c5d5b3&ava=1">
</div>
<div class="slida img-magnifier-container">
<img id="myimage2" src="https://sun9-69.userapi.com/impf/c824201/v824201969/17341f/IfCwbiGRL7c.jpg?size=200x0&quality=90&crop=0,0,500,588&sign=9b4d43be2be378401d5bec41a9c5d5b3&ava=1" alt="">
</div>
<div class="slida img-magnifier-container">
<img id="myimage3" src="https://sun9-69.userapi.com/impf/c824201/v824201969/17341f/IfCwbiGRL7c.jpg?size=200x0&quality=90&crop=0,0,500,588&sign=9b4d43be2be378401d5bec41a9c5d5b3&ava=1" alt="">
</div>
<div class="slida img-magnifier-container">
<img id="myimage4" src="https://sun9-69.userapi.com/impf/c824201/v824201969/17341f/IfCwbiGRL7c.jpg?size=200x0&quality=90&crop=0,0,500,588&sign=9b4d43be2be378401d5bec41a9c5d5b3&ava=1" alt="">
</div>
<div class="slida img-magnifier-container">
<img id="myimage5" src="https://sun9-69.userapi.com/impf/c824201/v824201969/17341f/IfCwbiGRL7c.jpg?size=200x0&quality=90&crop=0,0,500,588&sign=9b4d43be2be378401d5bec41a9c5d5b3&ava=1" alt="">
</div>
<div class="slida img-magnifier-container">
<img id="myimage6" src="https://sun9-69.userapi.com/impf/c824201/v824201969/17341f/IfCwbiGRL7c.jpg?size=200x0&quality=90&crop=0,0,500,588&sign=9b4d43be2be378401d5bec41a9c5d5b3&ava=1" alt="">
</div>
<div class="slida img-magnifier-container">
<img id="myimage7" src="https://sun9-69.userapi.com/impf/c824201/v824201969/17341f/IfCwbiGRL7c.jpg?size=200x0&quality=90&crop=0,0,500,588&sign=9b4d43be2be378401d5bec41a9c5d5b3&ava=1" alt="">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
<label for="r6" class="bar"></label>
<label for="r7" class="bar"></label>
</div>
</div>
关于html - 轮播指示器激活,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64941892/
我目前正在使用发现的重力脚本 here为了在我的网页上创建重力效果,我正在本地开发 atm。 我的问题是,重力效果的激活似乎是在鼠标移动时进行的,而我需要它在文档准备好时才触发。 google.cod
我正在尝试关注 Railsbridge Intallfest 并尝试将我的第一个 Rails 应用程序部署到 heroku。我不断收到以下错误消息: Gem::LoadError: Specified
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
Home-tab 是默认选中的,但是它的颜色是灰色的:( Home Bla Contact
我没有得到它的工作,我不知道为什么......遗憾的是其他问题 + 答案没有帮助。 测试设备: iPhone 6 iPad 2 相关代码: override func viewWillTransiti
我试图加载一个 View ,就像用户已经按下 UISearchBar 一样。我希望 SearchController 加载顶部的 UISearchBar 以及取消按钮。 我已经试过了: func ac
试图在 if whiteDotDist < centerRadius - whiteDotRadius 时获取代码执行它下面的所有代码都是事件的,并且当它下面的代码被执行时它再次变为非事件状态直到if
我正在使用 anaconda python。所以每次,在我的 mac 终端中,我输入终端命令: source /Users/mylaptop/anaconda/bin/activate /Users/
在我的 Angular 项目中,我有这种代码: this.swUpdate.available.subscribe(() => { ... }); 它工作正常,但给了我关于 activated 被
我想弄清楚 Julia 包是如何工作的,因为我喜欢容器化环境。我真的很挣扎。 在 python 中,我会做类似 conda create env --name ds 的事情创建环境然后安装容器化包我会
我的宏中有一些代码如下 ChDir File_pth Workbooks.Open filename:= File_pth & "\" & open_tkt Workbooks.Open filena
长话短说,我有两张纸,一张是“原始数据”,另一张是“结果”。我试图让结果表从“原始数据”表的每第七行中提取文本或数字,因此“结果”中的 A1 将是原始数据中的 A1,“结果”中的 A2 将是“原始数据
我不知道如何做到这一点,或者我是否可以做到这一点。我有一个 jQuery UI Accordion,多个部分,每个部分包含多个 anchor 标记,每个 anchor 标记都有一个唯一的字符串 id。
我不敢相信我还没有找到任何关于此的文档,但我想知道如何命令键盘激活并接收来自它的输入。我可以找到在编辑文本字段时操作弹出键盘的所有示例。谢谢 最佳答案 您还可以使用 UIKeyInput 协议(pro
我正在尝试为我的 Electron 应用程序生成NSIS安装程序的日志。为此,我创建了一个文件'logging.nsh'来定义LogSet和LogText宏。 以下是logging.nsh文件的代码:
几周前,我开始使用 typescript 和 knockoutJS,我有一个具体的问题,但我有解决方案,它太丑了,我无法忍受,但无法从中得到任何更好的东西,有太多代码需要粘贴,但我会尽力描述我的问题:
当我尝试激活我的虚拟环境时收到此错误即源 ~/edu-venv/bin/activate -bash: /home/vagrant/edu-venv/bin/activate: No such fil
要创建触发器,似乎必须发布它才能生效。但是发布需要对“协作”分支进行 PR,这意味着我们甚至在测试触发器是否实际工作之前就必须创建一个 PR,并且还必须创建多个后续 PR,直到我们获得正确的触发器。
我是最近的 IntelliJ Idea 用户,我不知道如何启用 Hibernate。当我右键单击我的项目时,Hibernate 不会出现在“添加框架支持”菜单中(实际上我唯一可以选择的技术是 Groo
要创建触发器,似乎必须发布它才能生效。但是发布需要对“协作”分支进行 PR,这意味着我们甚至在测试触发器是否实际工作之前就必须创建一个 PR,并且还必须创建多个后续 PR,直到我们获得正确的触发器。
我是一名优秀的程序员,十分优秀!