CSS: click-to-mutate div，里面有可点击的按钮。 : 关注 tabindex，可能吗？答案

【问题标题】：CSS: click-to-mutate div, with clickable buttons inside. :focus with tabindex, possibly?CSS: click-to-mutate div，里面有可点击的按钮。 : 关注 tabindex，可能吗？
【发布时间】：2017-06-09 20:50:09
【问题描述】：

搜索：仅 CSS，或 可理解，小型 jquery。我已经用 ":focus" 和 "tabindex="1"" 在 CSS 中准确地写出了我想要的东西。

目标：
- 点击 div = div 展开。（注意：多个元素的大量 CSS 更改）
- 展开的 div 内部有子按钮。
- 子按钮可点击。

这就像使用 ":focus" 和 "tabindex="1"" 的魅力，但单击 div 内的链接会移除焦点，并反转 div 扩展。我认为这种解决方法有效。但是不。

这是我创建的 JSfiddle（这是用于网络漫画网站上的档案页面。）我已经留下了所有的样式，所以你可能会明白我的意图：

https://jsfiddle.net/gvs291wf/1/

.comicselector {
  width: 200px;
  height: 200px;
  transition: .3s;
  margin: 0 auto 45px;
  display: flex;
}

.comicselector:hover {
  box-shadow: -5px 0px 20px 10px hsla(0, 0%, 0%, .4), 5px 0px 20px 10px hsla(0, 0%, 0%, .4);
}

.comicselector:focus {
  width: 400px;
  height: 500px;
  outline-width: 0;
  box-shadow: -30vw 0 0px 0px hsla(280, 0%, 10%, 0.5), 30vw 0 0px 0 hsla(280, 0%, 10%, 0.5);
  z-index: 101;
  cursor: default;
}

.comimg {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #840;
}

.comimgtitle {
  font-family: 'Days One', sans-serif;
  font-size: 3em;
  font-weight: 800;
  text-shadow: 0px 2px 15px hsla(0, 0%, 0%, 1);
  margin: auto;
  transition: 0.3s;
}

.comicselector:focus .comimgtitle {
  opacity: 0;
  font-size: 0;
}

.comimgauthor {
  font-size: 2em;
  font-weight: 800;
  text-shadow: 0px 2px 15px hsla(0, 0%, 0%, 1);
  font-variant: small-caps;
  margin: auto;
  transition: 0.3s;
}

.comicselector:focus .comimgauthor {
  opacity: 0;
  font-size: 0;
}

.cominfo {
  flex: 0;
  background: hsla(190, 50%, 45%, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  transition: .4s;
}

.comicselector:focus .cominfo {
  flex: 1;
}

.infochild {
  font-size: 0;
  transition: 0s;
}

.comicselector:focus .infochild {
  margin: auto;
  z-index: 110;
  transition: .5s;
}

.comictitle {
  padding: 20px 0;
}

.comicselector:focus .comictitle {
  font-size: 3em;
  text-shadow: 0px 4px 20px hsla(0, 0%, 35%, .4);
}

.comicselector:focus .comicauthor {
  font-weight: 700;
  font-size: 2em;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  pointer-events: none;
}

.comicselector:focus .startbeg {
  width: 42%;
  min-height: 70px;
  background: hsla(0, 0%, 35%, 0.4);
  color: #fff;
  font-size: 1em;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-decoration: none;
  margin: 15% auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.comicselector:focus .startbeg:hover {
  text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
  box-shadow: -230px 0 0px 0px hsla(280, 0%, 10%, 0.1), 230px 0 0px 0 hsla(280, 0%, 10%, 0.1), 0px 0px 24px 6px hsla(0, 0%, 20%, 0.1);
  background: hsla(0, 60%, 50%, 1);
}

.comicselector:focus .startlatest {
  width: 42%;
  min-height: 50px;
  background: hsla(260, 0%, 35%, 0.4);
  color: #fff;
  font-size: 1em;
  text-decoration: none;
  margin: 1% auto 8%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.comicselector:focus .startlatest:hover {
  text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
  box-shadow: -230px 0 0px 0px hsla(280, 0%, 10%, 0.1), 230px 0 0px 0 hsla(280, 0%, 10%, 0.1), 0px 0px 24px 6px hsla(0, 0%, 20%, 0.1);
  background: hsla(260, 60%, 50%, 1);
}

.seriesinfo {
  font-size: 0;
  opacity: 0;
}

.comicselector:focus .seriesinfo {
  opacity: 1;
  width: 100%;
  box-sizing: border-box;
  min-height: 100px;
  padding: 30px 10%;
  font-size: 1.2em;
  line-height: 1.2em;
  text-align: center;
  background: hsla(260, 0%, 0%, 0.1);
}

.comicselector:focus .eachseriesnav {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 10%;
  font-size: 1.2em;
  background: hsla(260, 0%, 0%, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.comicselector:focus .chapnavlinks {
  color: #fff;
  text-decoration: none;
  padding: 10px 16px;
  margin: 2px;
  background: hsla(260, 0%, 0%, 0.1);
  flex-grow: 1;
  transition: 0s;
}

.comicselector:focus .chapnavlinks:hover {
  text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
  box-shadow: 0px 0px 15px 2px hsla(0, 0%, 20%, 0.6);
  background: hsla(260, 50%, 45%, 1);
  transition: .5s;
}

<div class="comicselector" tabindex="1">
  <div class="comimg">
    <div class="comimgtitle">Title</div>
    <div class="comimgauthor">Author</div>
  </div>
  <div class="cominfo">
    <div class="comictitle infochild">title2</div>
    <div class="comicauthor infochild">author2</div>
    <a href="#" class="startbeg infochild">Start</a>
    <a href="#" class="startlatest infochild">Latest Release</a>
    <div class="seriesinfo infochild">comicdescrip
    </div>
    <div class="eachseriesnav infochild">
      <a href="" class="chapnavlinks">Chapter 1,2,etc</a>
    </div>
  </div>
</div>

谢谢！

【问题讨论】：

您希望.comicselector 何时收缩？你有几个.comicselector 项目吗？
是的，有10个漫画系列，每个都有这个类。我想人们可以在扩展的 div 之外单击以将其缩回，或者直接离开并滚动到下一个。
可以同时打开多个吗？
链接应该在同一个页面中做一些事情还是打开另一个html页面？
链接是指向不同页面的链接。除了通过单击扩展父 div 之外，没有什么特别的。我想扩展版本可以正常固定在页面上，但我希望它折叠成一个较小的横幅 div。

标签： css click focus expand tabindex

【解决方案1】：

我认为这应该符合您的预期。对于每个.comicselector，都有一个<label> 控制隐藏的单选按钮。当单选按钮为:checked 时，相应的.comicselector 具有您想要的:focus 行为。由于所有单选按钮通过 name 属性属于同一个组，选中一个会取消选中当前选中的一个。

选中单选时，我们会隐藏相应的标签 (display: none)，以防止 .comicselector 通过单击关闭。

我还添加了一个背景标签以允许从外部关闭选定的.comicselector。

在全页模式下观看 sn-p

.bg__label {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.comicselector {
  position: relative;
  width: 200px;
  height: 200px;
  transition: .3s;
  margin: 0 auto 45px;
  display: flex;
}

.comicselector:hover {
  box-shadow: -5px 0px 20px 10px hsla(0, 0%, 0%, .4), 5px 0px 20px 10px hsla(0, 0%, 0%, .4);
}

.comicselector__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.check {
  position: absolute;
  z-index: -1;
  visibility: hidden;
}

.check:checked+.comicselector>.comicselector__overlay {
  display: none;
}

.check:checked+.comicselector {
  width: 400px;
  height: 500px;
  outline-width: 0;
  box-shadow: -30vw 0 0px 0px hsla(280, 0%, 10%, 0.5), 30vw 0 0px 0 hsla(280, 0%, 10%, 0.5);
  z-index: 101;
  cursor: default;
}

.comimg {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #840;
}

.comimgtitle {
  font-family: 'Days One', sans-serif;
  font-size: 3em;
  font-weight: 800;
  text-shadow: 0px 2px 15px hsla(0, 0%, 0%, 1);
  margin: auto;
  transition: 0.3s;
}

.check:checked+.comicselector .comimgtitle {
  opacity: 0;
  font-size: 0;
}

.comimgauthor {
  font-size: 2em;
  font-weight: 800;
  text-shadow: 0px 2px 15px hsla(0, 0%, 0%, 1);
  font-variant: small-caps;
  margin: auto;
  transition: 0.3s;
}

.check:checked+.comicselector .comimgauthor {
  opacity: 0;
  font-size: 0;
}

.cominfo {
  flex: 0;
  background: hsla(190, 50%, 45%, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  transition: .4s;
}

.check:checked+.comicselector .cominfo {
  flex: 1;
}

.infochild {
  font-size: 0;
  transition: 0s;
}

.check:checked+.comicselector .infochild {
  margin: auto;
  z-index: 110;
  transition: .5s;
}

.comictitle {
  padding: 20px 0;
}

.check:checked+.comicselector .comictitle {
  font-size: 3em;
  text-shadow: 0px 4px 20px hsla(0, 0%, 35%, .4);
}

.check:checked+.comicselector .comicauthor {
  font-weight: 700;
  font-size: 2em;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  pointer-events: none;
}

.check:checked+.comicselector .startbeg {
  width: 42%;
  min-height: 70px;
  background: hsla(0, 0%, 35%, 0.4);
  color: #fff;
  font-size: 1em;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-decoration: none;
  margin: 15% auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.check:checked+.comicselector .startbeg:hover {
  text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
  box-shadow: -230px 0 0px 0px hsla(280, 0%, 10%, 0.1), 230px 0 0px 0 hsla(280, 0%, 10%, 0.1), 0px 0px 24px 6px hsla(0, 0%, 20%, 0.1);
  background: hsla(0, 60%, 50%, 1);
}

.check:checked+.comicselector .startlatest {
  width: 42%;
  min-height: 50px;
  background: hsla(260, 0%, 35%, 0.4);
  color: #fff;
  font-size: 1em;
  text-decoration: none;
  margin: 1% auto 8%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.check:checked+.comicselector .startlatest:hover {
  text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
  box-shadow: -230px 0 0px 0px hsla(280, 0%, 10%, 0.1), 230px 0 0px 0 hsla(280, 0%, 10%, 0.1), 0px 0px 24px 6px hsla(0, 0%, 20%, 0.1);
  background: hsla(260, 60%, 50%, 1);
}

.seriesinfo {
  font-size: 0;
  opacity: 0;
}

.check:checked+.comicselector .seriesinfo {
  opacity: 1;
  width: 100%;
  box-sizing: border-box;
  min-height: 100px;
  padding: 30px 10%;
  font-size: 1.2em;
  line-height: 1.2em;
  text-align: center;
  background: hsla(260, 0%, 0%, 0.1);
}

.check:checked+.comicselector .eachseriesnav {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 10%;
  font-size: 1.2em;
  background: hsla(260, 0%, 0%, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.check:checked+.comicselector .chapnavlinks {
  color: #fff;
  text-decoration: none;
  padding: 10px 16px;
  margin: 2px;
  background: hsla(260, 0%, 0%, 0.1);
  flex-grow: 1;
  transition: 0s;
}

.check:checked+.comicselector .chapnavlinks:hover {
  text-shadow: 0px 2px 12px hsla(0, 0%, 90%, 0.6);
  box-shadow: 0px 0px 15px 2px hsla(0, 0%, 20%, 0.6);
  background: hsla(260, 50%, 45%, 1);
  transition: .5s;
}

<input id="check0" type="radio" name="control" class="check" />
<label for="check0" class="bg__label"></label>

<input id="check1" type="radio" name="control" class="check" />
<div class="comicselector" tabindex="1">
  <label for="check1" class="comicselector__overlay"></label>
  <div class="comimg">
    <div class="comimgtitle">Title</div>
    <div class="comimgauthor">Author</div>
  </div>
  <div class="cominfo">
    <div class="comictitle infochild">title2</div>
    <div class="comicauthor infochild">author2</div>
    <a href="#" class="startbeg infochild">Start</a>
    <a href="#" class="startlatest infochild">Latest Release</a>
    <div class="seriesinfo infochild">comicdescrip
    </div>
    <div class="eachseriesnav infochild">
      <a href="" class="chapnavlinks">Chapter 1,2,etc</a>
    </div>
  </div>
</div>

<input id="check2" type="radio" name="control" class="check" />
<div class="comicselector" tabindex="1">
  <label for="check2" class="comicselector__overlay"></label>
  <div class="comimg">
    <div class="comimgtitle">Title</div>
    <div class="comimgauthor">Author</div>
  </div>
  <div class="cominfo">
    <div class="comictitle infochild">title2</div>
    <div class="comicauthor infochild">author2</div>
    <a href="#" class="startbeg infochild">Start</a>
    <a href="#" class="startlatest infochild">Latest Release</a>
    <div class="seriesinfo infochild">comicdescrip
    </div>
    <div class="eachseriesnav infochild">
      <a href="" class="chapnavlinks">Chapter 1,2,etc</a>
    </div>
  </div>
</div>

【讨论】：

这正是我想要的。谢谢你，英雄。你把魔法带回了我的生活。
欢迎。我真的很喜欢这个想法和设计。
非常感谢。一个问题：页面上没有其他东西是交互式的（其他链接），因为 bg_label 涵盖了所有内容。我能得到的唯一解决方法是，如果这些元素中的每一个都有一个 z-index，那么它们可以被鼠标悬停。
@PLCcory - 确实如此。这是一个警告，我找不到解决办法。它不能是选择器的容器，所以它必须有位置：绝对或固定。您可以在代码中的不同容器中添加多个指向 check0 的标签。
另一种解决方法，即视情况而定，将 bg_label 设为绝对值，使其宽度为 200%，高度为 110%，left-50%，top-5%...在每个横幅周围创建一个气泡.我的侧面什么都没有，所以点击任意位置到 L/R 都可以，上下 5%。