jquery - 选择另一个 div 时删除预加载的类

Question

我有一排 3 个 div，它们在悬停时突出显示。

我在页面加载时突出显示了第一个，但是当您将鼠标悬停在其他两个之一上时，该类不会删除。

谁能指出我选择另一个类(class)时如何删除类(class)的方向？

https://codepen.io/sharpy24ws/pen/ExxMGgW

  var header = document.getElementById("myDIV row");
  var btns = header.getElementsByClassName("card");
  for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("mouseover", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
  }

Answer 1

我删除了 CSS 文件底部的 .card1 {} 规则，因为我认为将 .active 添加到卡片的 HTML 中更有意义

卡片鼠标悬停监听器正在使用 jQuery 的 .hover() - 第一个回调是鼠标over 函数，第二个是鼠标离开

我还修复了 header 的选择器，并使 card 的选择器更加健壮 - [id*="card"] 使用属性选择器仅返回具有以 'card' 开头的 ID

的 div

const $header = $("#myDIV#row");
const $card = $('div[id*="card"]');

$card.hover(function () {
  $(this).addClass('active');
}, function () {
  $(this).removeClass('active');
});

.card {

  background-color: transparent;
  cursor: pointer;
  height: auto;
  border: 0;
}

/* Style the active class, and buttons on mouse-over */

.active,
.btn:hover {
  font-family: 'Lato', sans-serif;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(122, 113, 122, 0.66);
  -moz-box-shadow: 0px 5px 10px 0px rgba(122, 113, 122, 0.66);
  box-shadow: 0px 5px 10px 0px rgba(122, 113, 122, 0.66);
  background-color: #fff;

}

.cardheaderimage {
  margin-top: 100px;
  margin-bottom: 70px;
}

.cardheadertext {
  color: #001F55;
  font-size: 1.8em;
  border-bottom: 3px solid #001F55;
  display: inline-block;
  padding-bottom: 5px;
  margin-bottom: 20px;
  font-family: 'Muli', sans-serif;
  font-weight: 600;
  text-decoration: none;
}

.catdmaintext {
  color: #001F55;
  font-size: 1.2em;
  margin-bottom: 20px;
  font-family: 'Muli', sans-serif;
  font-weight: 200;
  text-decoration: none;
}

.cardlinktext {
  color: #30A3FC;
  font-size: 1.2em;
  margin-bottom: 88px;
  font-family: 'Muli', sans-serif;
  font-weight: 400;
  text-decoration: none;
}

/*
.card1 {
  font-family: 'Lato', sans-serif;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(122, 113, 122, 0.66);
  -moz-box-shadow: 0px 5px 10px 0px rgba(122, 113, 122, 0.66);
  box-shadow: 0px 5px 10px 0px rgba(122, 113, 122, 0.66);
  background-color: #fff;
}
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
  <div class="container ">
    <div class="inner">
      <div id="myDIV row" class="row no-margin ">

        <div class="card card1 col-4 active" id="card1">
          <center>
            <div class="cardheadertext">Panel 1</div>
            <div class="catdmaintext">Panel body text here. <br> Panel body text here. <br> Panel body text
              here. <br> Panel body text here. <br> Panel body text here. <br></div>
            <div class="cardlinktext"><a href="#">Click Here...</a></div>
          </center>
        </div>


        <div class="card col-4" id="card2">
          <center>
            <div class="cardheadertext">Panel 2</div>
            <div class="catdmaintext">Panel body text here. <br> Panel body text here. <br> Panel body text
              here. <br> Panel body text here. <br> Panel body text here. <br></div>
            <div class="cardlinktext"><a href="#">Click Here...</a></div>
          </center>
        </div>


        <div class="card col-4" id="card3">
          <center>
            <div class="cardheadertext">Panel 3</div>
            <div class="catdmaintext">Panel body text here. <br> Panel body text here. <br> Panel body text
              here. <br> Panel body text here. <br> Panel body text here. <br></div>
            <div class="cardlinktext"><a href="#">Click Here...</a></div>
          </center>
        </div>
      </div>
    </div>
  </div>

  <div class="qu-container" style="display: none;"><a href="#" class="qu-btn w-button active"
      onClick="validateForm('Request_More_Information')">Request more information</a>
  </div>
  <div class="qu-container" style="display: none;"><a href="#" class="qu-btn w-button active"
      onClick="validateForm('Request_More_Information')">Request more information</a>
  </div>
</div>