0

Can't seem to find much help about this anywhere, so i thought that I would try here.

I'm trying to make a simple for loop where when I hover over an html card, it hides some of the text in the card. The card has a simple first and last name, and I want to hide just the last name. I am able to make the whole card disappear by using the "this" object in the for loop, but I don't understand how to just make the text disappear. Any help would be appreciated as I'm still learning a lot about JS as I go.

Thanks!

let card = document.querySelectorAll(".card");

for (i = 0; i < card.length; i++) {
  card[i].addEventListener("mouseover", function() {
    this.classList.toggle("hide");
  });
}

for (i = 0; i < card.length; i++) {
  card[i].addEventListener("mouseout", function() {
    this.classList.toggle("hide");
  });
}
body {
  margin: 0;
}

.card {
  background-color: grey;
  border-radius: 4px;
  width: 100px;
  height: 100px;
  border: 1px black solid;
  display: inline-block;
  margin: 10px;
}

.hide {
  visibility: hidden;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="card.css">
  <title>test</title>
</head>

<body>
  <div class="card">
    <span class="first">first name</span>
    <span class="last">last name</span>
  </div>
  <div class="card">
    <span class="first">first name</span>
    <span class="last">last name</span>
  </div>

  <script type="text/javascript" src="card.js"></script>
</body>

</html>

Improve this question
1
  • Better to use mouseenter instead of mouseover. Commented Mar 15, 2020 at 21:12

2 Answers 2

Reset to default
1

this will represent the entire card as you've found. From there, you can use .querySelector() to locate the last name element within the card and operate on that.

let card = document.querySelectorAll(".card");

for (i = 0; i < card.length; i++) {
    card[i].addEventListener("mouseover", function() {
        this.querySelector(".last").classList.toggle("hide");
    });
}

for (i = 0; i < card.length; i++) {
    card[i].addEventListener("mouseout", function() {
        this.querySelector(".last").classList.toggle("hide");
    });
}
body {
    margin: 0;
}

.card {
    background-color: grey;
    border-radius: 4px;
    width: 100px;
    height: 100px;
    border: 1px black solid;
    display: inline-block;
    margin: 10px;
}

.hide {
    visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="card.css">
    <title>test</title>
</head>
<body>
    <div class="card">
        <span class="first">first name</span>
        <span class="last">last name</span>
    </div>
    <div class="card">
        <span class="first">first name</span>
        <span class="last">last name</span>
    </div>

    <script type="text/javascript" src="card.js"></script>
</body>
</html>

But this code can be simplified greatly as it can be done with just CSS and no JavaScript at all:

body {
    margin: 0;
}

.card {
    background-color: grey;
    border-radius: 4px;
    width: 100px;
    height: 100px;
    border: 1px black solid;
    display: inline-block;
    margin: 10px;
}

/* When a card is hovered, its "last" child element hidden */
.card:hover > .last {
    visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="card.css">
    <title>test</title>
</head>
<body>
    <div class="card">
        <span class="first">first name</span>
        <span class="last">last name</span>
    </div>
    <div class="card">
        <span class="first">first name</span>
        <span class="last">last name</span>
    </div>

    <script type="text/javascript" src="card.js"></script>
</body>
</html>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thank you this is super helpful. Never realized that I could use a ".querySelector()" after a "this" object. Didn't think to use CSS that way too. Super super helpful. If I may ask, is there any real benefit to using JS if it can just be done with css?
@Grant You're welcome. No, there is no benefit to JS when you can do it with CSS.
@Grant Also, you can call any DOM method on any DOM object -- it doesn't matter what the variable name is, only the object type.
0

Alternatively, you can use :hover in CSS:

.card {
  background-color: grey;
  border-radius: 4px;
  width: 100px;
  height: 100px;
  border: 1px black solid;
  display: inline-block;
  margin: 10px;
}

.card:hover .last {
  visibility: hidden;
}
<div class="card">
  <span class="first">first name</span>
  <span class="last">last name</span>
</div>
<div class="card">
  <span class="first">first name</span>
  <span class="last">last name</span>
</div>

Improve this answer

1 Comment

Thank you so much! This does exactly what I needed it to do!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.