选择另一个 div 时删除预加载的 class
Remove pre-loaded class when another div is selected
我有一排 3 个 div,它们在悬停时突出显示。
我在页面加载时突出显示了第一个,但是当您将鼠标悬停在其他两个之一上时,class 不会删除。
谁能告诉我如何在 select 另一个时删除 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";
});
}
您正在尝试从第一个框中删除 .active
class,该框的样式也是通过 .card1
class 设置的,但您并未删除。
您可以在 html 中正确设置此 .active class,以便在悬停时将其删除。还删除 .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>
我删除了 CSS 文件底部的 .card1 {}
规则,因为我认为将 .active
添加到卡的 HTML 上更有意义
卡片鼠标悬停侦听器正在使用 jQuery 的 .hover()
- 第一个回调是 mouseover 函数,第二个是 mouse离开
我还修复了 header
的选择器,并使 card
的选择器更加强大 - [id*="card"]
正在使用 return 的属性选择器只有具有以 '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>
我有一排 3 个 div,它们在悬停时突出显示。
我在页面加载时突出显示了第一个,但是当您将鼠标悬停在其他两个之一上时,class 不会删除。
谁能告诉我如何在 select 另一个时删除 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";
});
}
您正在尝试从第一个框中删除 .active
class,该框的样式也是通过 .card1
class 设置的,但您并未删除。
您可以在 html 中正确设置此 .active class,以便在悬停时将其删除。还删除 .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>
我删除了 CSS 文件底部的 .card1 {}
规则,因为我认为将 .active
添加到卡的 HTML 上更有意义
卡片鼠标悬停侦听器正在使用 jQuery 的 .hover()
- 第一个回调是 mouseover 函数,第二个是 mouse离开
我还修复了 header
的选择器,并使 card
的选择器更加强大 - [id*="card"]
正在使用 return 的属性选择器只有具有以 '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>