Hover over parent element shows href of child a element

I've created a list item element that contains a child anchor element.

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

Using jQuery I'm binding a click event to the list item. When the user clicks I'm grabbing the first anchor tag's href attribute and moving the user to that page.

While this works nicely I'd like to simulate the same hover effect that hovering over a link usually has: showing the referenced link in the status bar. Unfortunately window.status is not getting it done.

$(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');
        });
});

What should the function in .mouseover look like to get the d开发者_StackOverflow中文版esired effect? The above code is down and dirty so any general feedback would also be appreciated.

For security reasons, window.status is disabled by default in all of the major browsers. I know the link is to W3Schools, but it clearly illustrates the point. The only way you can affect the status bar is by making the user hover over a link whose URL you control.

Why don't you just put your content within the tag?

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

That way it will always have the URL for any of the content within. The following is still valid syntax.

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

Does the browser allow setting the status bar? You can disable that in modern browsers.