Dev
March 4, 2023
184 views
3 votes
3 Answers

Can anyone change this jQuery code into Vanilla JS.

onmouseover on wrapper and card I am showing the card. and onmouseleave it’s again going display none.



<div class="wrapper" onmouseover="show(this);" onmouseleave="hide(this);">
    <div class="box"></div>
    <div class="card" onmouseover="show(this);" onmouseleave="hide(this);">
        <img
            src="img-2">
    </div>
</div>

<div class="wrapper" onmouseover="show(this);" onmouseleave="hide(this);">
    <div class="box"></div>
    <div class="card" onmouseover="show(this);" onmouseleave="hide(this);">
        <img
            src="img-1">
    </div>
</div>


  function show(e) {
        $(e).find('.card').css('display','block');
    }
    function hide(e) {
        $(e).find('.card').css('display','none');
    }

Answers

You must make these changes to your code:

function show(element) {
  const cardElement = element.getElementsByClassName("card")[0];
  if (cardElement) {
    cardElement.style.display = 'block';
  }
}

function hide(element) {
  const cardElement = element.getElementsByClassName("card")[0];
  if (cardElement) {
    cardElement.style.display = 'none';
  }
}

.container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.wrapper {
  width: 60px;
  height: 60px;
  background-color: #f00;
  display: block;
}

.card {
  display: none;
}

<div class="container">
    <div class="wrapper" onmouseover="show(this);" onmouseleave="hide(this);">
        <div class="box"></div>
        <div class="card">
            <img src="https://api.dicebear.com/5.x/fun-emoji/svg?seed=img-2">
        </div>
    </div>

    <div class="wrapper" onmouseover="show(this);" onmouseleave="hide(this);">
        <div class="box"></div>
        <div class="card">
            <img src="https://api.dicebear.com/5.x/fun-emoji/svg?seed=img-1">
        </div>
    </div>
</div>

You can also achieve the same effect using only CSS:

.container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.wrapper {
  width: 60px;
  height: 60px;
  background-color: #f00;
  display: block;
}

/* This definition works to replace `onmouseleave` */
.card {
  display: none;
}

/* This definition works to replace `onmouseover` */
.wrapper:hover > .card {
  display: block;
}

<div class="container">
  <div class="wrapper">
    <div class="box"></div>
    <div class="card">
      <img src="https://api.dicebear.com/5.x/fun-emoji/svg?seed=img-2">
    </div>
  </div>

  <div class="wrapper">
    <div class="box"></div>
    <div class="card">
      <img src="https://api.dicebear.com/5.x/fun-emoji/svg?seed=img-1">
    </div>
  </div>
</div>

Following should do the trick

function hide(el){
  el.querySelector(".card").style.display = "none";
}

function show(el){
  el.querySelector(".card").style.display = "block";
}

You can also do this with pure CSS:

.card{
  width: 100px;
  height: 100px;
  display: none;
  background-color: red;
  
}

.container{
  background-color: lightgrey;
  border: 2px solid black;
}

.container:hover > .card{
  display: block;
}

<div class="container">
  <h2>
    Title
  </h2>
  <div class="card">
  
  </div>
</div>

JQuery’s find is a children selector (so you are looking for children of the actual element you are trying to select)

So depending on the element that you want triggerring the function,

// on clicked element
function show(el) { el.style.display = "block"; }

// on all siblings
function show(el) { 
    let elem=el.nextElementSibling; 
    while(elem){ $(elem).css('display', 'block'); elem=elem.nextElementSibling; }
    let elem=el.previousElementSibling; 
    while(elem){ $(elem).css('display', 'block'); elem=elem.previousElementSibling; }
}

// on siblings with class .card and itself
function show(el) { $(el.parentElement).find('.card').css('display', 'block'); }

// of children with class .card
function show(el) { $(el.parentElement).find('.card').css('display', 'block'); }

// You can also filter with standard operators. eg: el !== $(el.parentElement).find('.card')[0]

But at the end of the day, just use CSS selectors: eg:

.card:hover { display: none; }
.wrapper:hover .card { display: block; }
.wrapper:not(:hover) .card { display: none; }
 // and so on...

Also, I’m not 100% sure display: none and onMouse effects are compatible, you should try using opacity: 0 or something like that

Please signup or login to give your own answer.

Click here to cancel reply.

Can anyone tell me how to write the same code in vanilla js? – Jquery

Can anyone change this jQuery code into Vanilla JS.

Answers