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

CodePudding user response：

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>

CodePudding user response：

See JQuery documentation .hover()

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