hovering over a link

Question

I have a question: Is there any way to show the ID when you are hovering over a paragraph? I made a fiddle to explain it.

Fiddle.

Hope you guys know if it's possible.

Thanks!

You have to try something, then if it doesn't work, you ask a question showing your code. Google "show id onmouseover" — Juan Mendes, Mar 11 '16 at 23:59

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

If you are after setting p contents when you hover over the link, then you'll use onmouseover. Get the p element and set the innerText/innerhtml in JavaScript

<a href="somepage.php?id=3" data-id="3" onmouseover="document.getElementById('ptag').innerHtml(this.getAttribute('data-id'))">hover</a>

<p id="ptag"></p>

However, this way doesn't parse the url of the link

<a href="somepage.php?id=3" data-id="3" onmouseover="document.getElementById('ptag').innerHtml(this.getAttribute('href'))">hover</a>

<p id="ptag"></p>

This will show the link to the user in the p tag.

How can I get query string values in JavaScript?

This link will help you parse the url and get the id value from the link

edited May 23 '17 at 11:50

Community

1
1

answered Mar 11 '16 at 23:59

juz

581
4
10

Can you help me with that? I am not that experienced with js – Jasper Mulder Mar 12 '16 at 00:16
Updated answer with some sample, not at a comp to test but the gist is there – juz Mar 12 '16 at 00:20
Mark as answer if it helped, you may need to update the question to say hovering over a link – juz Mar 12 '16 at 00:39

score 1 · Answer 2 · answered Mar 12 '16 at 00:04

Pure CSS solution: you can use :after psudo element in combination with the attr() css function.

#name_1 {  
  background-color: gold;  
}

#name_2 {
  background-color: skyblue;  
}

#name_1:hover::after {
  content: attr(id);
  position: absolute;  
  font-size: 2em;
  font-weight: bold;
  color: red;
  background-color: lavender;
}

#name_2:hover::after {
  content: attr(id);
  position: absolute;
  font-size: 2em;
  font-weight: bold;
  color: red;
  background-color: lavender;
}

<p id=name_1>text text text text<br> text text text text </p>
<p id=name_2>text text text text<br> text text text text </p>

Nice solution but the OP needs to do some parsing of the attribute — Juan Mendes, Mar 12 '16 at 00:14

score 1 · Answer 3 · answered Mar 12 '16 at 00:43

To get, the ID from the query string and not the id of the element (http://jsfiddle.net/9L2ns0nL/5/), you can use jquery $(this).attr('href') and then split the resulting string according to the url pattern. see: http://jsfiddle.net/9L2ns0nL/9/

No confusing variables names next time.

hovering over a link

3 Answers3