添加 CSS 悬停效果到更改 div 的复选框下的标签

Question

如何在输入标签下添加CSS悬停效果？我正在尝试寻找没有 div ID 的通用解决方案。

现场演示可以在 JSFiddle 上找到 https://jsfiddle.net/AugerHybrid/8u045Lpc

勾选时应该expand/shrink对应div
它应该显示悬停效果以指示标签是可点击的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>checkbox expand div</title>
    <meta charset="UTF-8" />
    <style>
      .case {
        position: relative;
        margin-bottom: 1em;
      }
      .case label {
        display: inline-block;
        background-color: coral;
        box-sizing: border-box;
        width: 100%;
      }
      .case input {
        text-align: center;
        height: 55px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
      }
      .project-input {
        width: 100%;
        height: 20px;
        display: block;
      }
      .projectcontent {
        max-height: 50px;
        transition: max-height 0.15s ease-out;
        overflow: hidden;
        background-color: #888;
      }
      .case .project-input:checked + .projectcontent {
        max-height: 2000px;
        overflow: visible;
        transition: max-height 0.3s ease-out;
      }
    </style>
  </head>

  <body>
    <main>
      <h1>Expand divs</h1>
      <div class="case">
        <label for="project-input">
          <h2>Click here to expand/shrink this div</h2></label
        >

        <input type="checkbox" class="project-input" title="Expand / Shrink" />

        <div class="projectcontent">
          <p>Lorem ipsum<br />dolor sit amet.</p>
          <p>consectetur<br />adipiscing elit.</p>
          <p>sed do eiusmod<br />tempor incididunt.</p>
          <p>ut labore et<br />dolore magna aliqua.</p>
        </div>
      </div>
      <div class="case">
        <label for="project-input">
          <h2>Click here to expand/shrink this div</h2></label
        >

        <input type="checkbox" class="project-input" title="Expand / Shrink" />

        <div class="projectcontent">
          <p>Lorem ipsum<br />dolor sit amet.</p>
          <p>consectetur<br />adipiscing elit.</p>
          <p>sed do eiusmod<br />tempor incididunt.</p>
          <p>ut labore et<br />dolore magna aliqua.</p>
        </div>
      </div>
    </main>
  </body>
</html>

Answer 1

TLD'R - 添加 .case label:hover 角色。完全隐藏输入（例如使用 clip）并匹配标签 for 和输入 id 属性。

详细解释

可以在label中加上:hover来做悬停效果。 这里的问题是输入出现在标签的顶部，因此标签不会“捕捉”悬停。
解决方法是完全隐藏输入。问题现在点击标签没有任何反应。
解决方案是匹配标签for和输入id属性所以点击标签将选中/取消选中输入。

https://jsfiddle.net/moshfeu/jptv3snb/1/

添加 CSS 悬停效果到更改 div 的复选框下的标签

Add CSS hover effect to label under checkbox that alters div

html

css

checkbox