[Resolved] Making full div clickable

Home Forums Support Making full div clickable

This topic contains 6 replies, has 3 voices, and was last updated by  David 6 days, 11 hours ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1163377

    Mike

    Hello,

    Working on a site which is using multiple divs as blocks which link off to pages.

    They have a H2 within them that has an <a> that links to the page.

    I however want the whole div to be clickable…

    I have tried encapsulating the div in an <a> tag however WP auto closes it.

    I am trying to avoid using crude onclick JS or JQuery that looks for a click in the div and goes to the <a> location…

    Any ideas?

    Mike

    #1163396

    David Customer Support

    Hi there,

    you can use :pseudo elements to increase the click area of an <a>
    For example:

    
    /* The post <article> needs to be the closest relatively positioned element */
    .single-tile {
        position: relative;
    }
    
    /* then the a:before pseudo can be abs positioned to the article container */
    .tile-title a:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0; 
    }
    #1163399

    Leo Customer Support

    Hi there,

    Would something like this help?
    https://www.labnol.org/code/19639-turn-div-clickable-link

    Another possible solution here:
    https://stackoverflow.com/questions/8160494/how-to-make-a-whole-div-clickable-in-html-and-css-without-javascript

    This isn’t a theme related question so definitely worth trying a few solutions available on Google.

    #1165708

    Mike

    Hello Both,

    Really like the idea that David suggests of making the <a> fill the div using CSS.

    I have sort of managed to accomplish it…

    Problem being I now cannot get my text to be horizontally center aligned in the div.

    In order to get as far as I have got I ended up putting the <a> tag outside the <h2> tag rather than within as it was previously.

    Any ideas?

    Mike

    #1166025

    David Customer Support

    Heres a simple HTML example for using the pseudo elememt to enlarge the click area:

    <div class="my-container">
        <h2 class="my-title"><a href="#" class="my-title-link">The Title</a><h2>
    </div>

    And the CSS:

    /* Relative positioned container */
    .my-container {
        position: relative;
        min-height: 400px;
        background-image: url('my-image.jpg');
        /* Flex for centering */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Create pseudo element on link */
    /* Absolute positon over container */
    .my-title-link:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #000;
        opacity: 0;
    }
    
    /* BONUS: Add hover overlay effect to pseudo */
    .my-title-link:hover:before {
        opacity: 0.2;
    } 
    #1166091

    Mike

    Hello,

    Many thanks for that!

    Used your above code to full effect except changed the min-height: 400px; to height: inherit; so it would get its height from the above div, meaning if I ever want to make them longer or shorter I can do so easily without changing in two places!

    Many thanks for the help, really appreciated!

    Mike

    #1166105

    David Customer Support

    Glad to be of help 🙂

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.