CODEWITHSUNDEEP
javascripthtmljquery
lioneltour
lioneltour

Reputation: 1

Hover and selectors

I am completely new to Javascript / Jquery and I have a problem.

Suppose in my html page I have a number (undefined) of class to hover (when I hover something happens). Here I put 2 examples.

<div class='hover' id='hov33749'>Wikipedia</div>
<div class='hover' id='hov32747'>Google</div>

How to :

  1. Apply a function when I hover on Google or Wikipedia
  2. Retrieve the div corresponding to the hover (id, text, position on the page etc.)

I tried to put a random id and put some regex but it doesn't work well

I thank you in advance

Upvotes: 0

Views: 95

Answers (2)

ahsan
ahsan

Reputation: 1504

Since you are starting out with JavaScript, I'd suggest refrain JQuery for now and understand how the language itself works.

The following code adds an eventListener to all elements with class hover, the functionality of which is in onHover method

const onHover = (e) => {
    const id = e.target.id;
  const text = e.target.textContent;
    console.log(id, text);
}

const hover = document.querySelectorAll(".hover");
hover.forEach(item => item.addEventListener("mouseover", onHover));
<div class='hover' id='hov33749'>Wikipedia</div>
<div class='hover' id='hov32747'>Google</div>

Upvotes: 1

Jurakin
Jurakin

Reputation: 1084

See JQuery documentation .hover()

$(".hover").each(function(){
    $(this).hover(function(){
        // Do something ...
        console.log("Text: " + $(this).text() + ", Id: " + $(this).attr("id"));
    });
});

Upvotes: 0

Related Questions