Grow your CSS skills. Land your dream job.

jquery: opacity of columns? need help.

  • # December 8, 2009 at 10:36 am

    Howdy,

    i’m currently developing a wordpress theme for my own blog. It’s based on three columns (<ul class="latest">. When the page is loaded, all three columns are kinda blurred out (opacity:0.3). If you mouseover a col it’s getting 100% in its opacity. Everything works fine. You can see the result here:here

    The only thing i want to achieve is, if i mouseout of a col towards the body this col shouldn’t blur out. So i rollover the cols, the col i’m currently over should get a 100%. However if i rollout of this col towards the rest of the screen it should keep the 100% opacity. So ONE col should always stay at a 100%.

    I’ve no idea how i can achieve this? Please help me guys. Thank you.

    # December 8, 2009 at 11:42 am

    That’s kind of cool. You could probably make the opacity sticky by not using a mouseout but just mouseover (but hover works better).

    Code:
    $(document).ready(function(){
    $(“ul.latest”).css({opacity: 0.3});
    $(“ul.latest”).hover(function(){
    $(“ul.latest”).animate({opacity:0.3},200);
    $(this).stop().animate({opacity:1},300);
    });
    });
    # December 8, 2009 at 12:59 pm

    Thank you! awesome.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".