[Resolved] Making full div clickable

[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

[David]

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; 
}

[Leo]

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.

[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

[David]

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;
} 

[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

[David]

Glad to be of help 🙂

[David]

Hi David,
Came across this discussion and tried to use the CSS on a test page, using GB beta 4.
I get the hover effect, but nowhere is clickable – any clues ?
The link looks OK when I view the source code!
It’s the ‘Hi there mate’ block
https://dave.computer/play/

TIA, Dave

ps – Update: I took out:
content: ”;
That made the heading clickable, but not the whole block!

[David]

Hi there,

use the code i provided above but with the following 2 changes:

Change:

/* Create pseudo element on link */
/* Absolute positon over container */
.my-title-link:before {

to:

/* Create pseudo element on link */
/* Absolute positon over container */
.my-title-link a:before {

And change:

/* BONUS: Add hover overlay effect to pseudo */
.my-title-link:hover:before {

to

/* BONUS: Add hover overlay effect to pseudo */
.my-title-link a:hover:before {

[Author]

Posts