Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS moving an anchor tag up when we i hover it .

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #147514
    dagash
    Participant

    i am trying to make my navbar links move up ( by using margin-top ) but its not working ,,

    <div class="aa">
      <!-- <div class="icon"></div> -->
      <a href="#" class="link"><span class="icon-youtube"></span>category</a> 
    </div>
    

    and the css is here :

    body {
    background : #cd8fa0;
    }
    
    .aa{
    margin-top: 50px;
    background : #f9f9f9;
    transition : all 0.4s linear;
    width :80px;
    height : 80px;
    }
    
    .icon{
    background-image : url('images/alert.png');
    width: 48px;
    height: 48px;
    }
    
    a{
    text-decoration : none;
    font-size : 14px;
    transition : all 0.4s linear;
    }
    
    .aa a:hover {
    margin-top : 30px;
    transform : scale(1.05);
    
    }
    span {
    
    dispaly : block;
    font-size : 14px;
    
    }
    
    
    .link:hover span {
    
    color : red;
    
    }
    

    i am trying to make same as it is in this website ( social links icons ):
    http://blog.omariemran.com/

    note : for this class ( icon-youtube ) , i am using Awesome-font icon library .

    #147515
    Paulie_D
    Member

    Perhaps you could make a Codepen as I don’t think we have enough information.

    #147521
    Paulie_D
    Member

    Pretty sure that’s not what he’s looking for.

    As I understand it, his links/list items aren’t moving on hover as he expects.

    #147573
    Nishant
    Participant

    If i am getting right what you want to do then change.aa a:hover to .aa:hoverin your css.

    take a look here….. http://codepen.io/maxwbailey/pen/rbKzy

    #147575
    Paulie_D
    Member

    We don’t KNOW what the actual issue is until we see a live example (either a link or a Codepen).

    Otherwise we’re offering solutions in the dark.

    #147590
    Nishant
    Participant

    I think he just want a ‘move up’ hover effect to nav.

    #147594
    Paulie_D
    Member

    That’s obvious but without knowing the full structure we don’t know the best solution. It might be one of the above answers but it might be something else.

    #147624
    dagash
    Participant

    soey for being late … it was a hard day ,,,
    thank you for your respondse guys ,,, i will try thoose solution and ill come back ..

    #147625
    dagash
    Participant

    Nishant
    that is what i need , thank you guys…

    #147626
    noahgelman
    Participant

    Remove your current styles that are trying to move the link and add:

    a {
      position:relative; /* This will let us change where the link is displayed visually without affecting the rest of the dom */
    }
    
    a:hover {
      top:-2px; /* This value is the px length and direction you wish to move the link */
    }
    
    #147671
    dagash
    Participant

    http://codepen.io/anon/pen/pGrLI

    please guys check this ,, also not working …

    #147680
    Paulie_D
    Member

    Trick is to put as much styling on the anchor rather than the li if you want.

    You can move some on to the li if you want but you would have to add a hover state to the li too.

    http://codepen.io/Paulie-D/pen/DAyFK

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.