Question

HI,

I have this code for extracting the href and adding it to a parent block…

$(".new-dev").hover(function(){
    $(this).css('cursor','pointer');
    $('this').$('a').css('color','#696969');
},function(){
    $('this').$('a').css('color','#000');
});

What I want to do is make the a within the block change color on rollover. Unsure of how to do this when using $(this).

Any advice welcome.

Thanks,
C

Answer 1

You might wanna have a look at this jQuery plugin I wrote some time ago: clickable. If you call it on the block(s) you want to make clickable, like $(".new-dev").clickable(); then it extracts the href value of the first link within each block and use that to navigate to when the user clicks the block.

For styling, or additional scripting, it adds the following classNames as hooks:
on the matching blocks:

• .jsClickable
• .jsClickableHover (onmouseover, as IE6 doesn’t support :hover on elements other than links)
• .jsClickableFocus (when guiding link gets focus)

on the link that provides the target location:

• .jsGuide

So here the CSS would be:

.new-dev.jsClickable { cursor: pointer; }
.new-dev a { color: #000; }
.new-dev a:hover, .new-dev a:focus,
.jsClickableHover a.jsGuide, .jsClickableFocus a.jsGuide { color: #696969; }

This way the cursor only becomes a pointer in case JavaScript is enabled and the link also changes color if it gets focus, which makes it more accessible for keyboard navigation.

For downloading + documentation see the plugin’s page: jQuery: clickable — jLix