Hello Guys,
I’ve got a CSS :hover pseudo-class that is not producing any results. Also ‘cursor: pointer’ style doesn’t work.
I’m not sure what is wrong. I’m probably missing something really obvious.
Could someone help me with this?
<a href="#contact" class="contact">Contact Us</a>
header .showcase a.contact {
margin-top: 1rem;
text-decoration: none;
background: #4285f4;
font-size: 0.7rem;
color: #fff;
text-transform: uppercase;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
cursor: pointer;
box-shadow: 0 0.45rem 0.5rem -0.5px rgba(0,0,0,0.4);
transition: all ease-in-out 300ms;
}
header .showcase a.contact:hover {
box-shadow: 0px 27px 20px -20px rgba(0,0,0,0.2);
transform: translate(0px, -10px) scale(1.2);
}
1 Like
Are you sure that the “Contact Us” link in your page is nested in a <header> and an element with the showcase class?
Is this on codepen? It’s hard to tell why it doesn’t work with just one line of HTML.
Yes I am sure that everything is nested properly.
I keep getting this error in codepen:
- This website is under heavy load (queue full)
We’re sorry, too many people are accessing this website at the same time. We’re working on this problem. Please try again later.
Everything doesn’t seem to work today… 
Under heavy load again 
. I exported your pen as a zip file and will try somewhere else.
:hover seems to work. It turns red when I added color:red to it. And the box-shadow is working as well. The transform doesn’t work though.
<a> elements are already cursor:pointer
The cursor pointer seems to be working for me in Chrome.
Edit: as does the hover effect…
In VS doesn’t seem to work yet, it is working also for me in codepen…
Don’t know what is wrong with this…
header .showcase a.contact:hover {
box-shadow: 0px 27px 20px -20px rgba(0,0,0,0.2);
transform: translate(0px, -10px) scale(1.2);
}
transform seems to only apply for block elements. The transform worked when I added display: inline-block to the a.contact styles.
Thanks, I can’t see on codepen because isn’t working. I think my Visual Studio need an update because still doesn’t work…
The box-shadow is not working as I required now…
Why’d you put :after after :hover?
1 Like
I read a comment on google, but it didn’t work…
It works well on ‘dev tips’ pen (he has used a div with class of button while I have used an anchor tag with the class of contact)… https://codepen.io/devtips/pen/KzozLa
I think @kevcomedia has already solved the issue by pointing out that you’re incorrectly using the :after pseudo element:
header .showcase a.contact:hover:after {
box-shadow: 0px 37px 20px -20px rgba(0,0,0,0.2);
transform: translate(0px, -10px) scale(1.2);
}
Removing it seems to work just fine for me.
If you don’t understand CSS well, copypastaing cool effects often leads to issues like this (speaking from past experience). I find it helpful to ignore everything and just focus on recreating the effect for a single component in a separate Pen—it’s much easier to learn that way and also a lot easier for others to help.
Thanks for the time @honmanyau, I understand the CSS written (I was just exploring because I was not sure what’s wrong), removing the pseudo element still doesn’t work for me.
Does it work for you @kevcomedia?
What doesn’t work exactly? The styles appear on hover as they should
Sorry for bothering you. This doesn’t work for me on hover state…
box-shadow: 0px 37px 20px -20px rgba(0,0,0,0.4);
I’m not really bothered 
You’ll have to tweak the numbers until you achieve the effect that you want. Something around box-shadow: 0px 10px 5px -5px rgba(0,0,0,.2); Though I wonder why the box shadow disappears entirely (even when it’s fully opaque) 
Applying the styles to the div tag did the trick…
Thank you for your time @kevcomedia. 