Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign in to follow this  

    CSS Accessible Hover

       (0 reviews)

    Makes use of tabindex, z-index/opacity and :focus-within for a hover that is responsive on mobile and accessible to screen readers and keyboard users. Add your own styling to the .container and .hover classes.

     

    Aside from typical hover usage, the hover can be tabbed onto (for keyboard/screen reader users) and the content will remain showing until tabbed out of. Clicking inside the hover area will produce the same effect, and allow you to move the cursor on or off the hover area without losing sight of what's contained within.

     

    Working, more styled version on my codepen, here.


    Actual Template Responsive

    Hover Heading

    Hover paragraph

    Template code

    <style>
    /* Hover Container and main background - the stuff that surrounds your hover */
    .container {
      width: 300px;
      height: 400px;
      margin: 10px auto;
      padding: 15px;
      background: #232323;
      background: url('https://placehold.it/300x4600.png') center no-repeat;
      background-size: cover;
      border: 2px solid #252D34;
      z-index: 1;
    }
    
    /* Your styles for the inner div that shows when hovered go here. Opacity and z-index keep everything hidden properly */
    .hover {
      background: #111;
      color: #a0a0a0;
      width: 100%;
      height: 100%;
      overflow: auto;
      padding: 10px;
      opacity: 0;
      z-index: 0;
      transition: all ease-in-out .2s;
    }
    /* The hover state of the container. Notice that there's an added focus-within, this is what allows keyboards to access the hover, and like tabindex="0" must remain in the css for this to work */
    .container:hover .hover, .container:focus-within .hover {
      opacity: 1;
      z-index: 1;
    }
    
    /* Eliminates the hover on small screens, resets width and height */
    @media (max-width: 1000px) {
      .container, .hover {width: 100%; height: unset; z-index: 1; opacity: 1; visibility: visible;}
    }
    </style>
    
    <div class="container">
      <div class="hover" tabindex="0"><h1>Hover Heading</h1>
        <p>Hover paragraph</p>
      </div>
    </div>
    Sign in to follow this  


    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest



×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.