/    Sign up×
Community /Pin to ProfileBookmark

detect which div the mouse is hoovered over

Copy linkTweet thisAlerts:
Mar 13.2013

Hi, I have a site that has multiple divs. I would like to add onmouseover or onclick event for
each div. My problem is how can I use Javascript or Jquery to detect which div the user clicks on or hoover over, it seem like a chicken or eggs dilemma. Any suggestions will be greatly appreciated. If it’s possible, I would prefer not to have an id for each div.

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERMar 13.2013 — If you don't want to use an 'id' for each div (why not?)

then how do you plan on identifying which <div> is being hovered over?

What is to be evaluated and/or displayed when the hover occurs?

Show some code, even if it is only the HTML portion.

What does the layout look like?
Copy linkTweet thisAlerts:
@JMRKERMar 13.2013 — Note: I can be done with no JS at all...
<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Untitled &lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;style type="text/css"&gt;
div { height:50px; width:150px; border:5px solid red; margin:10px; 5px; }
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div title="div1"&gt;Div 1 information&lt;/div&gt;
&lt;div title="div2"&gt;Div 2 information&lt;/div&gt;
&lt;div title="div3"&gt;Div 3 information&lt;/div&gt;
&lt;div title="div4"&gt;Div 4 information&lt;/div&gt;
&lt;div title="div5"&gt;Div 5 information&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@MacPCauthorMar 14.2013 — I was thinking using other attributes such as top, left.

Now let say I want to use id, if I do it like this <div id="a"> now how do I use JQuery to find a when the mouseover. I use the to get the value but it does not work. alert($('div').attr('id')) I thought this will return "a" but it comes out undefined.
Copy linkTweet thisAlerts:
@MacPCauthorMar 14.2013 — Please excuse the unclear last post

I was thinking using other attributes such as top, left.

Now let say I want to use id, if I do it like this

<html>

<div id="a">

<div id="b">

</html>

now how do I use JQuery to find a div with onclick or onmouseover, I tried several ways from googling, the

all returns a list of all divs, what I really want is it returns the one div that's mouseover, if over a returns a,

if over b then returns b.
Copy linkTweet thisAlerts:
@JMRKERMar 14.2013 — Modify to your heart's content...
<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Untitled &lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;style type="text/css"&gt;
div { height:50px; width:150px; border:5px solid red; margin:10px; 5px; }
#hoverSpan { ; }
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;span id="hoverSpan"&gt;
&lt;div&gt;Div 1 information&lt;/div&gt;
&lt;div&gt;Div 2 information&lt;/div&gt;
&lt;div&gt;Div 3 information&lt;/div&gt;
&lt;div&gt;Div 4 information&lt;/div&gt;
&lt;div&gt;Div 5 information&lt;/div&gt;
&lt;/span&gt;

&lt;script type="text/javascript"&gt;
( function () {
var sel = document.getElementById('hoverSpan').getElementsByTagName('div');
for (var i=0; i&lt;sel.length; i++) {
sel[i].id = 'div'+i;
sel[i].onclick = function() { showID(this.id); }
}
function showID(info) { alert('This div has an ID of: '+info); }
} )();
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

Good Luck! ?
Copy linkTweet thisAlerts:
@rnd_meMar 14.2013 — if there are lots of divs, it's faster and simpler to use event delegation than manually binding each one:

[CODE]
<body>
<span id="hoverSpan">
<div id=i1>Div 1 information</div>
<div id=i2>Div 2 information</div>
<div id=i3>Div 3 information</div>
<div id=i4>Div 4 information</div>
<div id=i5>Div 5 information</div>
</span>

<script type="text/javascript">

hoverSpan.addEventListener("mouseover",
function showID(e) {
var targ=e.target||e.srcElement||{};
if(targ.id) alert('This div has an ID of: '+targ.id);
}, true );

</script>[/CODE]
Copy linkTweet thisAlerts:
@JMRKERMar 14.2013 — I don't know if there is much difference in OP's final project.

I tried to solve problem with initial request to not use IDs if possible.

But he/she may have changed their mind from initial posting.

?
Copy linkTweet thisAlerts:
@MacPCauthorMar 14.2013 — Thank you all for your replies. ?

The reason I don't want to use id is because I am working on a data visualization project. I use the jsDraw2D library, the project requires a lot of circles depends on how much data are read. I try not to hack the library too much by adding ids to the jsDraw2D.js. So I thought I could use other arttributes such astop, left color, radius etc.
×

Success!

Help @MacPC spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...