Question

我有一个问题：当您将鼠标悬停在段落上时，有没有办法显示ID？我做了一个小提琴来解释它。

希望你们知道是否可能。

谢谢！

Answer 1

如果您将鼠标悬停在链接上后设置了p内容，那么您将使用onmouseover。获取p元素并在JavaScript中设置innerText / innerhtml

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

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

但是，这种方式不会解析链接的网址

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

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

这将显示p标签中用户的链接。

How can I get query string values in JavaScript?

此链接将帮助您解析网址并从链接中获取ID值

Answer 2

纯CSS解决方案：您可以将:after psudo元素与attr() css函数结合使用。

#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>

Answer 3

从查询字符串获取 ID 而不是元素（http://jsfiddle.net/9L2ns0nL/5/）的 id ，您可以使用jquery $(this).attr('href')，然后根据url模式拆分生成的字符串。见：http://jsfiddle.net/9L2ns0nL/9/

下次没有令人困惑的变量名称。

悬停在链接上

3 个答案: