JS+CSS 动画按钮的可点击区域在 Squarespace 上被截断，但在 CodePen 上没有答案

【问题标题】：Clickable region of JS+CSS animated button is cut off on Squarespace but not on CodePenJS+CSS 动画按钮的可点击区域在 Squarespace 上被截断，但在 CodePen 上没有
【发布时间】：2022-02-09 06:11:17
【问题描述】：

this page of my portfolio site 上的 + 按钮提供有关视频的更多上下文和信息。它由一个简单的“加号”形 SVG 组成，我将它包含在一个圆形 div 中（border-radius: 100%），并在点击时动画出一个额外的 div。

On CodePen，在我最初编写此代码的地方，整个按钮（构成两个 div）都是可点击的。当我将代码复制到 Squarespace 时，我注意到按钮的上半部分不再可点击。

由于它按照 CodePen 的意图工作，我不认为代码存在问题（下面的一些相关部分，但在CodePen link 中更容易看到。

// HTML sn-p:

    <body>
     <div id="feed">
      <section class="slide" id="bB1">
       <div class="containerBox cBBefore">
        <div class="textContainer">
          <div class="textSubCont">
            <div class="plusButton noSelect">
              <div class="plusSpan inactivePlus"></div>
            </div>
              </div>
          </div>
         </div>
       </section>

// CSS 片段：

    .plusButton {
     position: absolute;
     pointer-events: auto;
     cursor: default;
     box-sizing: content-box;
     border-radius: 100%;
     right: -1.333vmin;
     top: -1.333vmin;
     height: 5vmin;
     width: 5vmin;
     z-index: 6;
     background: rgba(79, 76, 220, 0.75);
     -webkit-filter: drop-shadow(
     -0.25vmin 0.5vmin 0.5vmin rgba(0, 0, 0, 0.33)) !important;
     filter: drop-shadow(-0.25vmin 0.5vmin 0.5vmin rgba(0, 0, 0, 0.33)) !important;
     }

    .plusSpan {
      content: url(https://www.charliemoody.com/s/plus.svg);
      width: 100%;
      height: 100%;
      transform-origin: center;
      -webkit-transform-origin: center;
     }

   .activePlus {
     -webkit-transform: rotate(-765deg);
     transform: rotate(-765deg);
     -webkit-transition: transform 1s cubic-bezier(0.5, 0, 0.25, 1);
     transition: transform 1s cubic-bezier(0.5, 0, 0.25, 1);
     }

   .inactivePlus {
     -webkit-transform: rotate(0);
     transform: rotate(0);
     -webkit-transition: transform 1s cubic-bezier(0.5, 0, 0.25, 1);
     transition: transform 1s cubic-bezier(0.5, 0, 0.25, 1);
     }

// JS sn-ps

   function enableButtons() {
     let allButtons = document.querySelectorAll(".plusButton");
     let allButtonSpans = document.querySelectorAll(".plusSpan");
     let allCBs = document.querySelectorAll(".containerBox");

     for (let i = 0; i < allButtons.length; i++) {
      allButtons[i].addEventListener("click", function classToggle() {
      allButtonSpans[i].classList.toggle("inactivePlus");
      allButtonSpans[i].classList.toggle("activePlus");
      }
     }

    function pauseOnPlus() {
      let plusButtons = document.querySelectorAll(".plusButton");
      let vids = document.querySelectorAll(".vidElement");
      for (let i = 0; i < plusButtons.length; i++) {
      plusButtons[i].addEventListener("click", function (event) {
       if (vids[i].paused) vids[i].play();
       else vids[i].pause();
      });
     }
    }
   
    function loadTheRest() {
     enableButtons();
     pauseOnPlus();
    }

    window.addEventListener("load", loadTheRest);

【问题讨论】：

标签： javascript html css squarespace codepen

【解决方案1】：

没关系！！轻松修复。只需要添加“box-sizing: content-box;”到 CSS 中的 .plusSpan。

【讨论】：