Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>A few things:</p> <ul> <li>The string that you pass to the magical <code>$()</code> jQuery function can be the equivalent of what you may put in a CSS stylesheet if you wanted to style a particular element. The way you are using the selectors right now is wildly inefficient in addition to not being very clear. For example, using the <code>=*</code> selector is trying to find all links with the string <code>edit</code> <em>anywhere</em> in the class attribute. So links with a class of <code>abceditabc</code> would match. This makes jQuery do much more work than necessary trying to find these non-existent links. The accepted usage is instead to use a selector string such as <code>a.edit</code> which jQuery can quickly determine what it is and how to get it.</li> <li>Whenever you do an event binding like you are doing, <code>this</code> refers to the element that the event is currently being acted on inside the function. Unless you are doing event delegation, you're not really going to use <code>e.target</code>.</li> <li>The reason your code is only working when the hover is directly over the link is because whenever you hover over a different cell <code>e.target</code> would be a sibling td. <code>closest</code> does not have the ability to then traverse up that td, to the tr, to the next td down to the link. And even if it did, you probably want to avoid this as it's not necessary. This ties to the second point, as it is much easier to simply look for the link coming down from the table row.</li> </ul> <p>So, keeping these things in mind, you can rewrite what you have to this:</p> <pre><code>$(function() { $('a.edit').hide(); // hide all links with a class of edit // act upon all table rows with a class of data $('tr.data').hover(function() { // at this point, 'this' is the table row that is being hovered // we can use the find function to locate the link with a class of edit // then add a class to it and show it. $(this).find('a.edit').addClass("selected").show(); }, function() { // the second argument of the hover function is what should happen // when the mouse hovers out of the table row. In this case, we want // to find the link again, remove the class, and hide it. $(this).find('a.edit').removeClass("selected").hide(); }); }); </code></pre> <p>You can see the code this code acting on the HTML you posted <a href="http://jsbin.com/iguro" rel="nofollow noreferrer">here</a>. Works for me on FF, IE.</p> <p>A couple further suggestions:</p> <ul> <li>Always have the <a href="http://docs.jquery.com/Main_Page" rel="nofollow noreferrer">jQuery documentation</a> open. It is very good at explaining how things work.</li> <li>Get used to using Firefox/<a href="http://getfirebug.com/" rel="nofollow noreferrer">Firebug</a> when debugging your jQuery. Using <code>console.log(this);</code> inside your selectors when you want to see exactly what is being selected is a functionality that cannot be understated.</li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload