Inheriting a clickable area
Hi all,
I have an issue…
I want to find a way in CSS to inherit a clickable area from a parent. I have a text link inside what should be a button although the only clickable area is the text.
I am trying to apply the active hover state by choosing from elements within the inspector.
Would appreciate to hear your thoughts to fix this problem 🙏🏻
13 Replies
At the moment the text and the semi transparent outer area are both separate clickable areas. I would like to change this to one clickable ☝️
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
If I understand correctly putting the link around the button would solve your problem. Another option, if you dont controll the HTML, is using JS to set a clickEvent on the button with the href of the link inside.
yes I would like the transparent white areas to be the clickable location, not the text.
& yes I don't control the html because I am trying to adjust a pre-existing control panel for a web app called Superokay.
At the moment having a hover effect on the white area and the text is a bit confusing.
If it helps I could do a screen recording..
You can put anything inside a link, so you could do something like this:
I think for something with an icon and just one line of text, it's fine, though you might want to put a
aria-hidden on the images
If it's a card that could have a heading, image, and a few lines of text, there's a pseudo-element hack you can use that makes the entire thing clickable, but I don't think it's needed for something like this.
You could also just do this actually:
And make the a have the white background and padding... that might make more sense?I forgot the mention that I can only alter this inside a style tag in the header section. So I don't think I can add any HTML there..
I am particularly confused by the existing grey text hover state, which I think is some kind of hidden pseudo element although I can see it anywhere..
This is the desired hover effect should be black icon and text together..
I just realized you have the div and span inside the link, I didn't see it right at first...
Could you share a live version by any chance? It's really hard with screenshots
Annoyingly you have to log into a dashboard to see it on superokay..
I would either have to add your email to admin to give you login access. Or I could show you on TeamViewer.?
Sorry it is a little faff.. if either works for you..
Thanks Kevin, really appreciate you support. Here is the code I managed to copy with hoverify and paste onto visual studio code 👍
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
is that site live? We can look at that then
At the moment there is a separate hover effect in the button around the icon and the text. Ideally I would like to replace not remove the hover area to cover the complete button area not just the icon and text.
Because I am altering the code for a pre-designed template effectively there is already a separate hover effect that is active when the cursor moves onto the button area.
If the existing hover effect area could be altered to match the hover effect over the text that could be an even easier option. Although I cant find the location of that property to change..