making url hover when over td the url is in ::jquery::

Question

When hovering over a td in jquery how can i make the URLs in the td fire the "a:hover" css effect

Answer 1

You can try:

$('td').hover(function() {
    $(this).find('a').mouseover();
}, function() {
    $(this).find('a').mouseout();
});

Answer 2

I wish it were that easy, it seems thats not going to work, because i am loading the table via ajax, so even when adding live to it it doesn't help...

$('td').live('hover',function() {
    $(this).find('a.desc').mouseover();
}, function() {
    $(this).find('a.desc').mouseout();
});

Answer 3

$('td').hover(function() {
    $(this).find('a').addClass('name-class-simulates-hover');
}, function() {
    $(this).find('a').removeClass('name-class-simulates-hover');
});

Maybe adding a class with the same effects of your a:hover?

Answer 4

Some events cannot be handled by .live or other means, so if you find yourself needing to add events to new content, after or really as part of the addition to the page via ajax, you can THEN add event management via a call to a function.

function AddHover()
{
  $('td').hover(function() { 
      $(this).find('a').addClass('myHoverClass');
  }, function() { 
      $(this).find('a').removeClass('myHoverClass'); 
  }); 
};

and in the ajax load:

snip...

success: function(msg)
{
    LoadTableData(msg);// this function would process and add your page elements
    AddHover();// this then adds the events to the new markup
},

...end snip - see jQuery .ajax for more details on "success:"

Answer 5

Thanks for your input Thomas and Mark.

Thomas: I tried your method and it didnt work, but it gave me an idea to tweak it a little and i got it working...

$('tr').live('mouseenter',function() {
$(this).find('a.desc').addClass('bold');

}).live('mouseleave',function(){ $(this).find('a.desc').removeClass('bold'); });

The above code is my current solution and its working, hover doesn't seem to work, because live is required again to remove the 'bold' class thus i am using mouseenter and mouseleave.

Using mouseover on the $(this).find('a.desc').mouseover(); is out of the question... it even makes google chrome lag like no other... so I am sure thats not a good idea...

Mark: This is a pretty interesting idea, I will give it a shot, I tried to avoid using ".live()" as much as possible it doesn't seem to an efficient method, but thats pretty hard with web 2.0,