Html 将鼠标悬停在按钮上：显示链接？

您知道当您将鼠标悬停在普通链接上时，浏览器如何在屏幕底部显示url吗？当鼠标悬停在按钮链接上时，有没有办法做到这一点

<button class="myButtonClass" onclick="location.href='mylink.php'">here goes text</button>

<style>
  .myButtonClass {
  height:80px;
  width:340px;
  padding: 0;
border: none;
   background-image:url('button.png');
   background-color:#FFFFFF;
  }

  .myButtonClass:hover
{
background-color:#cccccc;
???????????make link appear on bottom?????????
} 

</style>

这里是文本
.myButtonClass{
高度：80px；
宽度：340px；
填充：0；
边界：无；
背景图片：url（'button.png'）；
背景色：#FFFFFF；
}
.MyButton类：悬停
{
背景色：#中交；
使链接显示在底部？？？？？？？？？
} 

---

谢谢

您所追求的被称为window.status

所以，你可以这样编码

window.status = "Change this..."

注意：此状态栏大部分时间不可更改，在大多数浏览器中默认情况下在浏览器中禁用

正如我之前所说，你可以做的另一个解决方案是：

---

• 为什么不直接使用锚定标签而不是按钮呢？然后将你的a设计成一个按钮

---

我认为您必须创建一个URL图像（该图像看起来像一个按钮），如下所示：

但接下来您必须创建一些事件，以便在单击或按住它时更改其外观

显示URL的最简单方法是添加标题

<button class="myButtonClass" onclick="location.href='mylink.php'" title="location.href='mylink.php'">here goes text</button>

这里是文本

使用

title

属性是可以的，但您不能轻松设置样式。相反，您可以尝试使用

：before

伪元素呈现弹出窗口，如下所示：

.myButtonClass {
  height:80px;
  width:340px;
  padding: 0;
  border: none;
  background-image:url(button.png);
  background-color:#FFFFFF;
  position:relative; 
}

.myButtonClass:hover {
  background-color:#cccccc;
}
.myButtonClass:hover:before {
  content:attr(data-src);        
  position:absolute;
  top:100%;
  left:0;
} 

HTML：

<button class="myButtonClass" data-src="mylink.php">here goes text</button>

var buttons = document.querySelectorAll('.myButtonClass');
for(var i = 0; i < buttons.length; i++)
    buttons[i].onclick = function(){
    location.href = this.getAttribute('data-src');
};

---

为什么不直接使用锚定标签而不是按钮呢？然后将你的a设计成一个按钮

var buttons = document.querySelectorAll('.myButtonClass');
for(var i = 0; i < buttons.length; i++)
    buttons[i].onclick = function(){
    location.href = this.getAttribute('data-src');
};

$('.myButtonClass').click(function(){
    location.href = $(this).attr('data-src');
 });