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
    Cim
    Cim is offline
    New Coder
    Join Date
    Jan 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Any way to put img hover state in inline css?

    So I'm not by any means set on using inline css to get this to work, but I don't know if there's any other way. I'm using a .js slidingPanels plugin to navigate through the pages on this site. So onclick it slides to the next panel. But the issue is the actual image btn where you click - is there any way to have that img change to another img on hover with the way this is set up?

    Code:
    <div id="mainNavigation">
    				
    <ul>
    							
    <li> <a href="#" onclick="sp2.showPanel(1); return false;"><img src="images/agency.png"></a></li>
    
    <li> <a href="#" onclick="sp2.showPanel(2); return false;"><img src="images/work.png"></a></li>
    
    <li> <a href="#" onclick="sp2.showPanel(3); return false;"><img src="images/latest.png"></a></li>
    
    <li> <a href="#" onclick="sp2.showPanel(4); return false;"><img src="images/info.png"></a></li>
    				
    </ul>
    				
    </div>

  • #2
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    0
    Thanked 2 Times in 2 Posts
    You can create a ".button" class, then add a class to each link, such as ".agency" and ".work". Once that's done, you can use the :hover pseudo-class to change the background image on rollover:

    Code:
    <head>
    <style>
    .button { height:100px; width:100px; display:block; }
      .agency { background-image:url('agency.png'); }
      .agency:hover { background-image:url('agencyh.png');}
      .work { background-image:url('work.png'); }
      .work:hover { background-image:url('workh.png');}
    </style>
    </head>
    
    <body>
    <div id="mainNavigation">
    <ul>
    <li><a class="button agency" href="#" onclick="sp2.showPanel(1); return false;"> </a></li>
    <li><a class="button work" href="#" onclick="sp2.showPanel(2); return false;"> </a></li>
    </ul>
    </div>

  • Users who have thanked awgentry for this post:

    Cim (06-12-2012)

  • #3
    Cim
    Cim is offline
    New Coder
    Join Date
    Jan 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Worked like a charm. Thank you!

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    0
    Thanked 2 Times in 2 Posts
    You can make it better for accessibility/SEO by changing the code a bit:

    Code:
    .button { height:100px; width:100px; display:block; text-indent: -99999px; }
    
    ...
    
    <li><a class="button agency" href="#" onclick="sp2.showPanel(1); return false;">Agency</a></li>
    This text isn't seen by the average user, but shows up for screen readers and search engines.

    I got this from Kyle Schaffer's post, where he describes a similar technique.


  •  

    Posting Permissions

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