Question 43013 in Html Question posted in
Some basic documentation can be found here.

How can I add elements to a card while hovering using javascript? – Html

I’m trying to add elements to a card while the mouse is hovering over the card (like netflix cards), however when the cursor is moved to where the new button appears the mouseout event is triggered and the button cannot be pressed. Here’s an example:

<div class="cards">
    <img class="cardsImg" src="codePic.jpg" alt="">
    <h3>Project 1</h3>
    <div class="cardsDesc"></div>
</div>

and JS:

document.addEventListener('DOMContentLoaded', function () {
    let cards = document.querySelectorAll('.cards');
    for (let i = 0; i < cards.length; i++) {
        cards[i].addEventListener('mouseover', function () {
            let desc = cards[i].querySelector('.cardsDesc')
            desc.innerHTML = `<div class="readMore" onmouseover="moveArrow('arrow1')" onmouseout="moveArrowBack('arrow1')">
            <a href="About.html" class="readMoreLink">Click here to read more <span id="arrow1">➔</span></a>
            </div>`;
        })
        cards[i].addEventListener('mouseout', function () {
            let desc = cards[i].querySelector('.cardsDesc')
            desc.innerHTML = ``;
        })
    }
})

I’m new to JavaScript, not sure what to try so any help is apprciated.

Tags:

2

Answers


  1. 0

    Try using mouseenter and mouseleave events. Working Example https://codepen.io/sethuramancbe/pen/poxoreK

    function moveArrow(arrow) {
  //your code
}
function moveArrowBack(arrow) {
//your code
}
document.addEventListener('DOMContentLoaded', function () {
    let cards = document.querySelectorAll('.cards');
    for (let i = 0; i < cards.length; i++) {
        cards[i].addEventListener('mouseenter', function () {
            let desc = cards[i].querySelector('.cardsDesc')
            desc.innerHTML = `<div class="readMore" onmouseover="moveArrow('arrow1')" onmouseout="moveArrowBack('arrow1')">
            <a href="About.html" class="readMoreLink">Click here to read more <span id="arrow1">&#10132;</span></a>
            </div>`;
        })
        cards[i].addEventListener('mouseleave', function () {
            let desc = cards[i].querySelector('.cardsDesc')
            desc.innerHTML = ``;
        })
    }
})
    <div class="cards">
    <img class="cardsImg" src="codePic.jpg" alt="">
    <h3>Project 1</h3>
    <div class="cardsDesc"></div>
</div>
    Login or Signup to reply.
  2. 0 
    let cards = document.querySelectorAll('.cards');
  for (let i = 0; i < cards.length; i++) {
    let desc = cards[i].querySelector('.cardsDesc');
    cards[i].addEventListener('mouseover', function () {
      desc.style.display = `block`;
    });
    cards[i].addEventListener('mouseout', function () {
      desc.style.display = 'none';
    });
}
    <div class="cards">
  <img class="cardsImg" src="codePic.jpg" alt="" />
  <h3>Project 1</h3>
  <div class="cardsDesc" style="display: none">
    <div class="readMore">
      <a href="About.html" class="readMoreLink">Click here to read more <span id="arrow1">&#10132;</span></a>
    </div>
  </div>
</div>

    Here is the solution for your problem, you should define it like this to achieve it.
    For any queries do let me know.
    Thank you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search