分享
三行代码  ›  专栏  ›  技术社区  ›  MasoodS

当鼠标悬停在按钮上时,如何显示按钮的id

  •  0
  • MasoodS  · 技术社区  · 1 周前

    当用户将鼠标悬停在按钮上时,可以使用以下代码更改按钮的名称。当用户将鼠标悬停在按钮上时,有没有一种方法可以用它的id来更改按钮的名称(使用JavaScript)?

    .button:hover span {
      display: none
    }
    
    .button:hover:before {
      content: "New name";
    }
    
    .button:hover {
      background-color: #aaaaaa;
    }
    <button class="button" id="some_id">
      <span>old name</span>
    </button>
    3 回复  |  直到 1 周前
        1
  •  4
  •   Lain    1 周前

    你可以用 attr(id) documentation 更多信息。

    .button:hover span {
      display: none
    }
    
    .button:hover:before {
      content: attr(id);
    }
    
    .button:hover {
      background-color: #aaaaaa;
    }
    <button class="button" id="some_id">
      <span>old name</span>
    </button>
        2
  •  1
  •   user4723924    1 周前

    这是一个可以改变一切的方法。。。

    onmouseover="this.innerHTML=this.id;"
    
    onmouseout="this.id=this.innerHTML; this.innerHTML='old name';"
    

    只需将这些事件添加到按钮中。

        3
  •  0
  •   user4723924    1 周前

    onmouseover=“this.innerHTML=这个.id;”