Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts

    lose hover function

    Not sure which category to put this, but here goes...

    I have navigation along one side of the page. And i have matching images in the center. For the text, I have some code for changing the (google) font face weight when its moused over.

    For the images, I have a bit of code folded into other stuff, to change the text weight also - when the images are moused over.

    The problem is, when they mouse over the image, part of the css mouse-over for the text itself stops working. The font weight no longer changes, but the character width does something.

    Here's the CSS:
    Code:
    ul.main-nav {float:left; font-family: 'Source Sans Pro', sans-serif; font-weight: 300;letter-spacing:.5px;}
    
    
    ul.main-nav a:link{border:none; text-decoration:none;color:#000000;font-family: 'Source Sans Pro', sans-serif; font-weight: 300; }
    ul.main-nav a:hover{border:none; text-decoration:none;color:#184761; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; letter-spacing:.25px;}
    ul.main-nav a:visited{border:none; text-decoration:none;color:#111111;font-family: 'Source Sans Pro', sans-serif; font-weight: 300; }
    Here's the javascript:
    Code:
    $(".square.one").mouseenter(function(){
        $(this).animate({height:"+=10px",width:"+=10px"},200);
        $("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
      });
      
     $(".square.one").mouseleave(function(){
        $(this).animate({height:"-=10px",width:"-=10px"},200);
        $("#link_nest").css({color:"black",fontWeight:"300"},100);
      });

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    You need to declare your visited styles BEFORE the hover styles.

    Just put the visited styles above your hover styles.

    Kind regards,

    LC.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,631
    Thanks
    0
    Thanked 648 Times in 638 Posts
    In order for them all to work properly styles for <a> tags always need to be specified in one of the following two orders:

    a:link
    a:visited
    a:hover
    a:focus
    a:active

    or

    a:link
    a:visited
    a:focus
    a:hover
    a:active

    which of those two orders you use only matters if you have visitors who use both their keyboard and their mouse to navigate and where they may have tabbed to the field ready to activate it by pressing enter and also have their mouse hovering over it ready to activate it by clicking the mouse button. In that instance whichever of the two that you have listed last will be the one to take effect. Generally though you want both of those cases to work the same and so would specify:

    a:link
    a:visited
    a:hover, a:focus
    a:active


    Note that the reason for needing this order is that:

    1. all a:visited are also a:link
    2. all a:hover and a:focus are also a:link and may also be a:visited
    3. all a:active are all also a:hover or a:focus

    The last one that corresponds to the current state of the link is the one that gets applied.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts
    Thanks,

    unfortunately, it didn't make a difference. I just solved the problem by moving the rollovers all into the jquery, like this:

    Code:
    $(".square.one,#link_nest").mouseenter(function(){
        $(".square.one").animate({height:"+=10px",width:"+=10px"},200);
        $("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
        $("#square_caption1").css('visibility','visible');
      });
      
     $(".square.one,#link_nest").mouseleave(function(){
        $(".square.one").animate({height:"-=10px",width:"-=10px"},200);
        $("#link_nest").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
        $("#square_caption1").css('visibility','hidden');
      });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •