Question

如果您比较图像，您会发现当右侧列表的按钮悬停在左侧移动中的@box 图像时，第二张图像。那么我该如何使用 CSS 或 JS 做到这一点？我想我必须用 css 来做到这一点，我尝试了一些东西，但它没有用，或者它只适用于第一个按钮（我在 css 中使用 .btn:hover .boximage 但它不起作用），另一个按钮是悬停时不起作用。

document.getElementById("arrowbtn1").onclick = arrow1;
document.getElementById("arrowbtn2").onclick = arrow2;
document.getElementById("arrowbtn3").onclick = arrow3;
document.getElementById("arrowbtn4").onclick = arrow4;
document.getElementById("arrowbtn5").onclick = arrow5;

var arrowstatus = [1, 1, 1, 1, 1];

function arrow1() {
  unclickOtherArrows(1)
  if (arrowstatus[0] == 1) {
    document.getElementById("p1").style.display = "block";
    document.getElementById("span1").style.fontWeight = "bold";
    document.getElementById("span1").style.color = "hsl(238, 29%, 16%)";
    document.getElementById("arrowimage1").style.transform = "scaley(-1)";
    document.getElementById("arrowimage1").style.marginTop = "5px";
    arrowstatus[0] = 0;
  } else if (arrowstatus[0] == 0) {
    document.getElementById("p1").style.display = "none";
    document.getElementById("span1").style.fontWeight = "normal";
    document.getElementById("span1").style.color = "inherit";
    document.getElementById("arrowimage1").style.transform = "scaley(1)";
    document.getElementById("arrowimage1").style.marginTop = "0px";
    arrowstatus[0] = 1;
  }
}

function arrow2() {
  unclickOtherArrows(2)
  if (arrowstatus[1] == 1) {
    document.getElementById("p2").style.display = "block";
    document.getElementById("span2").style.fontWeight = "bold";
    document.getElementById("span2").style.color = "hsl(238, 29%, 16%)";
    document.getElementById("arrowimage2").style.transform = "scaley(-1)";
    document.getElementById("arrowimage2").style.marginTop = "5px";
    arrowstatus[1] = 0;
  } else if (arrowstatus[1] == 0) {
    document.getElementById("p2").style.display = "none";
    document.getElementById("span2").style.fontWeight = "normal";
    document.getElementById("span2").style.color = "inherit";
    document.getElementById("arrowimage2").style.transform = "scaley(1)";
    document.getElementById("arrowimage2").style.marginTop = "0px";
    arrowstatus[1] = 1;
  }
}

function arrow3() {
  unclickOtherArrows(3)
  if (arrowstatus[2] == 1) {
    document.getElementById("p3").style.display = "block";
    document.getElementById("span3").style.fontWeight = "bold";
    document.getElementById("span3").style.color = "hsl(238, 29%, 16%)";
    document.getElementById("arrowimage3").style.transform = "scaley(-1)";
    document.getElementById("arrowimage3").style.marginTop = "5px";
    arrowstatus[2] = 0;
  } else if (arrowstatus[2] == 0) {
    document.getElementById("p3").style.display = "none";
    document.getElementById("span3").style.fontWeight = "normal";
    document.getElementById("span3").style.color = "inherit";
    document.getElementById("arrowimage3").style.transform = "scaley(1)";
    document.getElementById("arrowimage3").style.marginTop = "0px";
    arrowstatus[2] = 1;
  }
}

function arrow4() {
  unclickOtherArrows(4)
  if (arrowstatus[3] == 1) {
    document.getElementById("p4").style.display = "block";
    document.getElementById("span4").style.fontWeight = "bold";
    document.getElementById("span4").style.color = "hsl(238, 29%, 16%)";
    document.getElementById("arrowimage4").style.transform = "scaley(-1)";
    document.getElementById("arrowimage4").style.marginTop = "5px";
    arrowstatus[3] = 0;
  } else if (arrowstatus[3] == 0) {
    document.getElementById("p4").style.display = "none";
    document.getElementById("span4").style.fontWeight = "normal";
    document.getElementById("span4").style.color = "inherit";
    document.getElementById("arrowimage4").style.transform = "scaley(1)";
    document.getElementById("arrowimage4").style.marginTop = "0px";
    arrowstatus[3] = 1;
  }
}

function arrow5() {
  unclickOtherArrows(5)
  if (arrowstatus[4] == 1) {
    document.getElementById("p5").style.display = "block";
    document.getElementById("span5").style.fontWeight = "bold";
    document.getElementById("span5").style.color = "hsl(238, 29%, 16%)";
    document.getElementById("arrowimage5").style.transform = "scaley(-1)";
    document.getElementById("arrowimage5").style.marginTop = "5px";
    arrowstatus[4] = 0;
  } else if (arrowstatus[4] == 0) {
    document.getElementById("p5").style.display = "none";
    document.getElementById("span5").style.fontWeight = "normal";
    document.getElementById("span5").style.color = "inherit";
    document.getElementById("arrowimage5").style.transform = "scaley(1)";
    document.getElementById("arrowimage5").style.marginTop = "0px";
    arrowstatus[4] = 1;
  }
}

function unclickOtherArrows(currentArrow) {
  if (!(currentArrow === 1) && arrowstatus[0] === 0) arrow1();
  if (!(currentArrow === 2) && arrowstatus[1] === 0) arrow2();
  if (!(currentArrow === 3) && arrowstatus[2] === 0) arrow3();
  if (!(currentArrow === 4) && arrowstatus[3] === 0) arrow4();
  if (!(currentArrow === 5) && arrowstatus[4] === 0) arrow5();
  return;
}

body {
  width: auto;
  height: auto;
  font-family: Kumbh Sans, sans-serif;
  background-color: hsl(273, 75%, 66%);
}

.contentdiv {
  z-index: 2;
  width: 960px;
  height: 560px;
  display: block;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 150px;
  border-radius: 15px;
  background-color: white;
}

.backimage {
  position: absolute;
  top: -260px;
  left: -577px;
}

.womanimage {
  position: absolute;
  top: 100px;
  left: -85px;
}

.boximage {
  z-index: 1000;
  position: absolute;
  top: 390px;
  left: 50px;
}

ul {
  width: fit-content;
  position: absolute;
  top: 30px;
  right: 60px;
  list-style-type: none;
}

h1 {
  position: relative;
  left: -40px;
  color: hsl(238, 29%, 16%);
}

li {
  width: 400px;
  position: relative;
  left: -40px;
  padding-top: 10px;
  padding-bottom: 5px;
  color: hsl(240, 6%, 50%);
  border-bottom: 2px solid hsl(240, 5%, 91%);
}

button {
  width: 100%;
  height: 25px;
  border: none;
  outline: none;
  margin-bottom: 15px;
  background-color: inherit;
  color: hsl(240, 6%, 50%);
}

button:hover {
  color: hsl(14, 88%, 65%);
}

li:hover .boximage {
  transform: translateX(-25px);
  -ms-transform: translateX(-25px);
  -webkit-transform: translateX(-25px);
}

span {
  position: absolute;
  left: 0;
  font-size: 17px;
}

.arrowimage {
  float: right;
  padding-top: 5px;
}

p {
  margin-top: 0;
  display: none;
  line-height: 25px;
}

<div class="contentdiv">
  <img src="images/bg-pattern-desktop.svg" alt="image background" class="backimage">
  <img src="images/illustration-woman-online-desktop.svg" alt="woman online desktop" class="womanimage">

  <ul class="ul">
    <h1>FAQ</h1>
    <li>

      <button type="button" id="arrowbtn1" class="btn1">
                    <span id="span1">How many team members can I invite?</span>
                    <img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage1" class="arrowimage">
                </button>
      <p id="p1">
        You can invite up to 2 additional users on the<br> Free plan.There is no limit on team members for <br> the Premium plan.
      </p>
      <img src="images/illustration-box-desktop.svg" alt="box" class="boximage" id="box">
    </li>
    <li>
      <button type="button" id="arrowbtn2" class="btn">
                    <span id="span2">What is the maximum file upload size?</span>
                    <img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage2" class="arrowimage">
                </button>
      <p id="p2">
        No more than 2GB. All files in your account must<br> fit your allotted storage space.
      </p>
      <img src="images/illustration-box-desktop.svg" alt="box" class="boximage" id="box">
    </li>

    <li>
      <button type="button" id="arrowbtn3" class="btn">
                    <span id="span3">How do I reset my password?</span>
                    <img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage3" class="arrowimage">
                </button>
      <p id="p3">
        Click “Forgot password” from the login page or<br> “Change password” from your profile page.<br> A reset link will be emailed to you
      </p>
      <img src="images/illustration-box-desktop.svg" alt="box" class="boximage" id="box">
    </li>

    <li>
      <button type="button" id="arrowbtn4" class="btn">
                    <span id="span4">Can I cancel my subscription?</span>
                    <img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage4" class="arrowimage">
                </button>
      <p id="p4">
        Yes! Send us a message and we’ll process your<br> request no questions asked.
      </p>
      <img src="images/illustration-box-desktop.svg" alt="box" class="boximage" id="box">
    </li>

    <li>
      <button type="button" id="arrowbtn5" class="btn">
                    <span id="span5">Do you provide additional support?</span>
                    <img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage5" class="arrowimage">
                </button>
      <p id="p5">
        Chat and email support is available 24/7. Phone<br> lines are open during normal business hours.
      </p>
      <img src="images/illustration-box-desktop.svg" alt="box" class="boximage" id="box">
    </li>
  </ul>

</div>

Answer 1

尝试将 overflow:hidden 添加到您的按钮：hover css

当按钮悬停时，其他东西会移动

1 个答案: