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

时间:2010-11-13 23:41:37

标签: javascript

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

<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中的函数应该如何获得所需的效果?上面的代码是肮脏的,所以任何一般的反馈也会受到赞赏。

3 个答案:

答案 0 :(得分:2)

出于安全原因,window.status在所有主流浏览器中均为disabled by default。我知道链接是W3Schools,但它清楚地说明了这一点。影响状态栏的唯一方法是将用户悬停在您控制其URL的链接上。

答案 1 :(得分:1)

为什么不把你的内容放在标签内?

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

答案 2 :(得分:0)

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