将鼠标悬停在父元素上会显示子元素的href

Question

我创建了一个包含子锚元素的列表项元素。

<ul id="machine-list">
    <li>
        <a href="gosomewhere">Somewhere</a>
    </li>
</ul>

使用jQuery，我将click事件绑定到列表项。 当用户单击时，我将获取第一个锚标记的href属性并将用户移动到该页面。

尽管这很好用，但我还是想模拟悬停在链接上通常具有的悬停效果：在状态栏中显示引用的链接。 不幸的是window.status没有完成它。

$(document).ready(function () {
    $('#machine-list > li')
    .css('cursor', 'pointer')
    .click(
        function (e) {
            window.location = $(e.target).find('a').attr('href');
        })
    .mouseover(
        function (e) {
            window.status = $(e.target).find('a').attr('href');
        });
});

.mouseover的函数应如何获得预期的效果？ 上面的代码是肮脏的，因此任何常规反馈也将不胜感激。

Answer 1

出于安全原因， 默认情况下 ，所有主要浏览器均禁用 window.status 。 我知道链接是指向W3Schools的，但是它清楚地说明了这一点。 影响状态栏的唯一方法是使用户悬停在您控制其URL的链接上。

Answer 2

您为什么不只将内容放入标签中？

<li><a>content goes here</a></li>

这样，它将始终具有其中任何内容的URL。 以下仍然是有效的语法。

<li>
 <a>
  <div>
   <table>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
   </table>
  </div>
 </a>
</li>

Answer 3

浏览器是否允许设置状态栏？ 您可以在现代浏览器中将其禁用。