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

Question

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

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

谁能指出我在选择另一个班级时如何删除班级？

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 中更有意义

card mouseover 监听器使用 jQuery 的 .hover() - 第一个回调是 mouseover 函数，第二个是 mouseleave

我还修复了header 的选择器，并使card 的选择器更加健壮-[id*="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>

Answer 2

您正在尝试从第一个框中删除 .active 类，该类也通过您未删除的 .card1 类设置样式。

您可以在 html 中设置这个 .active 类，以便在悬停时将其删除。同时删除 .card1 的 css 规则。

示例：

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";
  });
}

.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;
}
 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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>