Jquery clickable block

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

Update: I thought one can do this with CSS but this approach would not work in all browser, e.g. not in IE6. If this is important for you, than you have to stick with the JS approach.
I also updated the code because I think I know understood what you really want:

Here you go (you got the syntax wrong):

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

This applies the color changing to every a inside elements with class new-dev. But as you change the cursor style only once, a better solution might be:

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

This applies the cursor style to all elements with class new_dev first and then applies the hover functions. There is no need to set the cursor style inside the hover function over and over again.

Read about selectors and traversing in the documentation.

Note: color changes the color of the font, if you want to change the background color, use background-color.

Answer 2

If I think what you actually need is that you need to style anchor element to have some kind of change of css on hover event. You can do that with css

.new-dev a{
color:#000;
}

.new-dev:hover a{
color:#696969;
cursor:pointer;
}

If I however misunderstood your question, please update it with some HTML as well.

Answer 3

It looks like this is what you want, if you are looking to change every <a> in the block when hovering over the block, not each anchor individually.

Try this CSS, no need for javascript in this case:

.new-dev { cursor: pointer; }
.new-dev a { color: #000; }
.new-dev:hover a { color: #696969; }

cursor only affects on mouse over already, best to leave that in the CSS :)

However, if you wanted to animate between colors instead of just toggling, you could do this (still leave the cursor rule in the CSS):

$(".new-dev").hover(function(){
    $('a', this).stop().animate({ 'color' : '#696969' });
},function(){
    $('a', this).stop().animate({ 'color' : '#000000' });
});

This will fade smoothly between the colors, but you'll need the jQuery color plugin found here :)
Here's a quick demo of this approach

Answer 4

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

Answer 5

Good plugins:

http://newism.com.au/blog/post/58/bigtarget-js-increasing-the-size-of-clickable-targets/

http://www.trovster.com/lab/plugins/fitted/