1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Link Transition Effect When Hovering?

Discussion in 'Styling and Customization Questions' started by DRE, Sep 12, 2012.

  1. DRE

    DRE Well-Known Member

    I've been up all night trying to get this to work but to of no avail. Sometimes it works but when it does other stuff screws up. Basically just trying to get links to highlight in slo-motion like so: http://themejunkies.net/forums/
     
  2. Shelley

    Shelley Well-Known Member

    You could apply the transition effects to each class rather than apply a global setting which I assume your doing? The transition does have adverse effects on some areas such as navbar popupmenu hovers etc so I would apply them specifically to the areas you want.
     
  3. DRE

    DRE Well-Known Member

    I just wanted the subforum titles to do it and the message title enhancement area like in your addon does.
     
  4. Shelley

    Shelley Well-Known Member

    Not sure what you mean with the subforum titles. wouldn't applying the following in extra do it for the message titlebar?

    Code:
    .thread_view .titleBar h1 a:hover {
        -moz-transition: all 0.3s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out 0s;
        -webkit-transition: all 0.3s ease-in-out 0s;
        opacity: 0.5;
    }
     
    8thos likes this.
  5. DRE

    DRE Well-Known Member

    YEEAAAHH like that, thank you!!!


    test24.jpg
     
  6. Shelley

    Shelley Well-Known Member

    Code:
    .nodeTitle a:hover {
        -moz-transition: all 0.3s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out 0s;
        -webkit-transition: all 0.3s ease-in-out 0s;
        opacity: 0.4;
    }
    
     
  7. MagnusB

    MagnusB Well-Known Member

    You can do the same thing with jQuery:
    Code:
    $(".link").hover(function(){
      $(this).animate({ opacity: '0.5'}, "slow"); // Hover effect
    }, function() {
      $(this).animate({ opacity: '1'}, "slow"); // start / end 
    });
    You just need to change .link to the class you need to change. You can also use color, but then you need a plugin or jQuery UI.
     
  8. DRE

    DRE Well-Known Member

    Thank you but that didn't work! Hmm...
     
  9. DRE

    DRE Well-Known Member

    I've been using this btw

    Code:
    .forum_view .titleBar h1 a:hover {
        -moz-transition: all 0.5s ease-in-out 0s;
        -o-transition: all 0.5s ease-in-out 0s;
        -webkit-transition: all 0.5s ease-in-out 0s;
    color: #3436CE;
    }
     

Share This Page