Question

您知道当您将鼠标悬停在普通链接上时，浏览器会在屏幕底部显示网址吗？有什么方法可以将鼠标悬停在按钮链接上吗？

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

由于

Answer 1

你所追求的是window.status。 https://developer.mozilla.org/en-US/docs/Web/API/window.status

所以，你可以像这样编码

window.status = "Change this..."

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

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

为什么不使用锚标签而不是按钮？然后将a样式设为看起来像一个按钮

Answer 2

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

<a src='location.href="mylink.php"' title='Delete'><img src='button.jpg'></a>

但是你必须创建一些事件，以便在点击或按住它时改变外观。

显示网址的最简单方法是添加标题。

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

Answer 3

使用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>

<强> JS ：

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

最好不要使用内联事件属性来注册一些处理程序，如果使用jQuery，代码甚至更清晰：

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

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

3 个答案:

Demo.