CODEWITHSUNDEEP
htmlcsshyperlinkcss-selectors
lostmonster
lostmonster

Reputation: 37

Different link css hover styles not working as desired...?

I have multiple CSS styles for link hover states.

Base link hover style:

a:hover {
    opacity: .7;
{

Then, I have grid elements that are in themselves links, that have transform styles; however, I don't want their opacity to change... but I can't seem to get it to work right? Here is the code for the entire grid and grid elements:

HTML:

<div class="prevnextgrid">
    <a href="link I'm using">
        <div class="left">
            left grid element content
        </div>
    </a>
    <a href="other link I'm using">
        <div class="right">
            right grid element content
        </div>
    </a>
</div>

CSS:

.prevnextgrid {
    margin-top: 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

.prevnextgrid div {
    position: relative;
    transition-duration: .2s, .2s;
    transition-timing-function: linear, ease-in-out;
}

.prevnextgrid div.left:hover {
    -webkit-transform: translatex(-3px);
    transform: translatex(-3px);
}

.prevnextgrid, div.right:hover {
    -webkit-transform: translatex(3px);
    transform: translatex(3px);
}

Then, just for clarity's sake, I added additional CSS styling just to clarify I don't want these grid element links to change opacity on hover:


a.prevnextgrid div.left:hover {
    opacity: 1;
}

a.prevnextgrid, div.right:hover {
    opacity: 1;
}

It ain't workin and I don't know why. I've tried various different orientations of the css styling but none seem to work. Maybe I missed one that is correct and should make it work? Can anyone help me out?

Upvotes: 0

Views: 69

Answers (1)

Johannes
Johannes

Reputation: 67799

Your selectors need to be as follows:

.prevnextgrid div {
    position: relative;
    transition-duration: .2s, .2s;
    transition-timing-function: linear, ease-in-out;
}

.prevnextgrid a:hover div.left {
    -webkit-transform: translatex(-3px);
    transform: translatex(-3px);
}

.prevnextgrid a:hover div.right {
    -webkit-transform: translatex(3px);
    transform: translatex(3px);
}

And to avoid the default opacitiy change on hover, you need to add

.prevnextgrid a:hover {
  opacity: 1;
}

Upvotes: 2

Related Questions