how to change color on hover in CSS grid

Question

I'm trying to add a hover effect to this CSS grid with no success. I tried transition and opacity techniques but to no avail. What am I doing wrong? Thank you in advance for your help: Below is the code or here's the page I'm working on: https://www.nanosweb.org/i4a/pages/index.cfm?pageID=3389

@media screen and (min-width:850px) {    
    .cards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 10px;
    }
}


.card {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(102, 153, 102, .9);
    padding: 2rem;
    height: 6rem;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    cursor: pointer;
    transition: color 2s;
}

.cards a {
    text-decoration: none !important;
    color: white !important;
}

.cards .card:hover {
    background-color: rgb(102, 153, 102);
}

<h2 style="text-align: center;">List of Neuro-Ophthalmic Conditions</h2>

<section class="cards">
<div class="card"><a href="https://www.nanosweb.org/anisocoria"><strong><span style="font-size:16px;">Anisocoria</span></strong></a></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/GiantCellArteritis" target="_blank">Giant Cell Arteritis</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/i4a/pages/index.cfm?pageid=4166" target="_blank">Homonymous Hemianopsia</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/IIH">Idiopathic Intracranial Hypertension/ Pseudotumor Cerebri</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/i4a/pages/index.cfm?pageid=4188" target="_blank">Leber Hereditary Optic Neuropathy</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/i4a/pages/index.cfm?pageid=4155" target="_blank">Myasthenia Gravis</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/drusen">Optic Disc Drusen</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/PituitaryTumor">Pituitary Tumor</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/ThyroidEyeDisease" target="_blank">Thyroid Eye Disease</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/TransientVisualLoss" target="_blank">Transient Visual Loss</a></span></strong></div>
</section>

Answer 1

You must target the :hover selector on the element with the .card class, like this:

 .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 10px; }.card { display: flex; justify-content: center; align-items: center; background-color: rgb(102, 153, 102, 0.9); padding: 2rem; height: 6rem; overflow: hidden; margin-top: 5px; margin-bottom: 5px; text-align: center; cursor: pointer; transition: color 2s; }.card:hover { background-color: #336699; }.cards a { text-decoration: none; color: white; }

 <section class="cards"> <div class="card"><a href="https://www.nanosweb.org/anisocoria"><strong><span style="font-size:16px;">Anisocoria</span></strong></a></div> <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/GiantCellArteritis" target="_blank">Giant Cell Arteritis</a></span></strong></div> <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/i4a/pages/index.cfm?pageid=4166" target="_blank">Homonymous Hemianopsia</a></span></strong></div> <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/IIH">Idiopathic Intracranial Hypertension/ Pseudotumor Cerebri</a></span></strong></div> <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/i4a/pages/index.cfm?pageid=4188" target="_blank">Leber Hereditary Optic Neuropathy</a></span></strong></div> <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/i4a/pages/index.cfm?pageid=4155" target="_blank">Myasthenia Gravis</a></span></strong></div> <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/drusen">Optic Disc Drusen</a></span></strong></div> <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/PituitaryTumor">Pituitary Tumor</a></span></strong></div> <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/ThyroidEyeDisease" target="_blank">Thyroid Eye Disease</a></span></strong></div> <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/TransientVisualLoss" target="_blank">Transient Visual Loss</a></span></strong></div> </section>