javascript - 悬停父元素后,使用 vanilla javascript 将类添加/删除到不同的元素
问题描述
我已经查看了许多类似的问题,但找不到一个具体示例,可以在 vanilla JS 中回答如何将类添加和删除到与悬停的元素不同的元素。我知道这与设置循环和遍历元素有关,但我在确切的过程中迷失了方向。
基本上,我的卡片上有一个关闭按钮,我希望仅当有人将鼠标悬停在卡片上时才显示关闭按钮。我添加了 2 个不同的类来显示和隐藏它,但是,我的脚本不起作用。
不幸的是,我不允许使用 JQuery。
var closeButton = document.getElementsByClassName('close');
var card = document.getElementsByClassName('.card')
for (var i = 0; i < card.length; i++) {
card[i].addEventListener("mouseover", function() {
for (var i = 0; i < closeButton.length; i++) {
closeButton[i].classList.add('shown');
closeButton[i].classList.remove('hidden');
}
});
card[i].addEventListener("mouseout", function() {
for (var i = 0; i < closeButton.length; i++) {
closeButton[i].remove('shown');
closeButton[i].add('hidden');
}
});
}
/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block
}
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden] {
display: none
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
html,
button,
input,
select,
textarea {
font-family: sans-serif
}
body {
margin: 0
}
a:active,
a:hover {
outline: 0
}
h1 {
font-size: 2em;
margin: .67em 0
}
h2 {
font-size: 1.5em;
margin: .83em 0
}
h3 {
font-size: 1.17em;
margin: 1em 0
}
h4 {
font-size: 1em;
margin: 1.33em 0
}
h5 {
font-size: .83em;
margin: 1.67em 0
}
h6 {
font-size: .67em;
margin: 2.33em 0
}
abbr[title] {
border-bottom: 1px dotted
}
b,
strong {
font-weight: bold
}
blockquote {
margin: 1em 40px
}
dfn {
font-style: italic
}
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0
}
mark {
background: #ff0;
color: #000
}
p,
pre {
margin: 1em 0
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word
}
q {
quotes: none
}
q:before,
q:after {
content: '';
content: none
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -0.5em
}
sub {
bottom: -0.25em
}
dl,
menu,
ol,
ul {
margin: 1em 0
}
dd {
margin: 0 0 0 40px
}
menu,
ol,
ul {
padding: 0 0 0 40px
}
nav ul,
nav ol {
list-style: none;
list-style-image: none;
padding: 0;
margin: 0
}
img {
border: 0;
-ms-interpolation-mode: bicubic
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 0
}
form {
margin: 0
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
border: 0;
padding: 0;
white-space: normal;
*margin-left: -7px
}
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle
}
button,
input {
line-height: normal
}
button,
select {
text-transform: none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
*overflow: visible
}
button[disabled],
html input[disabled] {
cursor: default
}
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
*height: 13px;
*width: 13px
}
input[type="search"] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
a:link {
text-decoration: none !important;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
textarea {
overflow: auto;
vertical-align: top
}
table {
border-collapse: collapse;
border-spacing: 0
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
html {
font-size: 100%;
font-family: sans-serif;
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
background: #f8f8f8;
}
#wrapper {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
padding: 20px;
max-width: 980px;
background: #fff;
-webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
border-radius: 2px;
}
.clearfix {
overflow: auto;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.headline {
padding: 0 10px;
}
.headline .promoted-stories {
font-weight: bold;
color: #404040;
}
.headline .taboola-link {
float: right;
}
.headline .taboola-link a {
font-weight: 300;
line-height: normal;
text-align: right;
color: #888888;
font-size: 11px;
}
.cards {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.card {
display: block;
min-height: 1px;
margin: 1%;
-webkit-box-flex: 0;
-ms-flex: 0 0 31.33333333%;
flex: 0 0 31.33333333%;
-webkit-box-shadow: 0px 0px 1px -2px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0px 0px 1px -2px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
-webkit-transition: all .25s;
transition: all .25s;
position: relative;
}
.card:hover {
-webkit-transform: translate(0, -2px);
transform: translate(0, -2px);
-webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.2), 0px 3px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.2), 0px 3px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
.overlay {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.card .thumbnail {
display: block;
height: 130px;
}
.card img {
height: 100%;
width: 100%;
border: none;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 50% 50%;
object-position: 50% 50%;
}
.card-content {
padding: 5px 10px 25px;
}
.card .card-content .card-title {
margin: 5px 0 0 0;
overflow: hidden;
color: #000;
font-weight: bold;
max-height: 72px;
font-size: .875rem;
line-height: 1.5rem;
text-decoration: none;
}
.card .card-content .category {
color: #999999;
font-size: 11.0px;
font-weight: bold;
text-decoration: none;
margin: 5px 0 0 0;
overflow: hidden;
max-height: 52px;
}
.close {
position: absolute;
right: 15px;
top: 5px;
}
.shown {
display: block;
}
.hidden {
display: none;
}
.close:before,
.close:after {
position: absolute;
left: 0;
right: 0;
content: ' ';
height: 15px;
width: 2px;
background-color: #fff;
}
.close:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media only screen and (max-width: 768px) {
.card {
-webkit-box-flex: 0;
-ms-flex: 0 0 48%;
flex: 0 0 48%;
}
}
@media only screen and (max-width: 480px) {
.card {
-webkit-box-flex: 0;
-ms-flex: 0 0 98%;
flex: 0 0 98%;
margin: 2%;
}
.card .thumbnail,
.card .thumbnail a:first-of-type {
height: 170px;
}
}
<section id="wrapper">
<div class="headline clearfix">
<span class="promoted-stories">Promoted stories</span>
<span class="taboola-link"><a href="#">Sponsored Links by Taboola</a></span>
</div>
<div class="cards clearfix">
<article class="card">
<a class="overlay" href="#overlay-link"></a>
<figure class="thumbnail">
<img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="3 Reasons Why You Haven't Found Your Match Yet">
<a href="#" class="close hidden"></a><!-- close hidden button -->
</figure>
<div class="card-content">
<h2 class="card-title">3 Reasons Why You Haven't Found Your Match Yet</h2>
<p class="category">Dating life</p>
</div><!-- .card-content -->
</article><!-- .card -->
<article class="card">
<a class="overlay" href="#overlay-link"></a>
<figure class="thumbnail">
<img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="Harry And Meghan Announce Baby On The Way">
<a href="#" class="close hidden"></a><!-- close hidden button -->
</figure>
<div class="card-content">
<h2 class="card-title">Harry And Meghan Announce Baby On The Way</h2>
<p class="category">Royals</p>
</div><!-- .card-content -->
</article><!-- .card -->
<article class="card">
<a class="overlay" href="#overlay-link"></a>
<figure class="thumbnail">
<img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="Things Get Seriously Real As RuPaul Cast Open Up">
<a href="#" class="close hidden"></a><!-- close hidden button -->
</figure>
<div class="card-content">
<h2 class="card-title">Things Get Seriously Real As RuPaul Cast Open Up</h2>
<p class="category">Celebrities</p>
</div><!-- .card-content -->
</article><!-- .card -->
<article class="card">
<a class="overlay" href="#overlay-link"></a>
<figure class="thumbnail">
<img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="A Tiger Collapsed In A Russian Circus Mid-Show">
<a href="#" class="close hidden"></a><!-- close hidden button -->
</figure>
<div class="card-content">
<h2 class="card-title">A Tiger Collapsed In A Russian Circus Mid-Show</h2>
<p class="category">Circus</p>
</div><!-- .card-content -->
</article><!-- .card -->
<article class="card">
<a class="overlay" href="#overlay-link"></a>
<figure class="thumbnail">
<img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="Engagement On The Cards For Jack And Dani">
<a href="#" class="close hidden"></a><!-- close hidden button -->
</figure>
<div class="card-content">
<h2 class="card-title">Engagement On The Cards For Jack And Dani</h2>
<p class="category">Dating life</p>
</div><!-- .card-content -->
</article><!-- .card -->
<article class="card">
<a class="overlay" href="#overlay-link"></a>
<figure class="thumbnail">
<img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="Attwood Hits Back At Rumours Of Dani Dyer Fued">
<a href="#" class="close hidden"></a><!-- close hidden button -->
</figure>
<div class="card-content">
<h2 class="card-title">Attwood Hits Back At Rumours Of Dani Dyer Fued</h2>
<p class="category">Gossip</p>
</div><!-- .card-content -->
</article><!-- .card -->
</div>
</section>
解决方案
在您的代码document.getElementsByClassName('.card')
中,将查找类名为 as.card
和 not的元素card
。此外,您不需要两个类来实现此功能。只需删除hidden
课程即可完成工作。
这是更新的JS代码:
(function() {
document.querySelectorAll(".card").forEach(function(card) {
card.addEventListener("mouseenter", function() {
card.querySelector(".close").classList.remove("hidden");
})
card.addEventListener("mouseout", function() {
card.querySelector(".close").classList.add("hidden");
})
})
})()
推荐阅读
- in-app-purchase - 是否可以不循环 latest_receipt_info 以保存应用购买中的交易记录
- java - 检查已输入的变量 user 在 Java 中是否为字符串:setter & getter?
- java - 如何在java中模拟身份验证url?
- r - R [Shiny]:实现对 dateRangeInput 反应的值框的问题
- python - 将网页表格直接捕获到数据框中
- python - 如何使用步长 +/-5 生成随机序列
- r - R:存储循环的结果
- python - 如何删除连接到外键 django 的项目?
- google-apps-script - 你如何覆盖数据而不是 appendRow?
- javascript - 如何在 CoinGecko 中访问 API 子组件