如何在 CSS 网格中更改 hover 的颜色

Question

我正在尝试向此 CSS 网格添加 hover 效果，但没有成功。 我尝试了过渡和不透明度技术，但无济于事。 我究竟做错了什么？ 提前感谢您的帮助：以下是代码或我正在处理的页面： 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

您必须使用.card class 定位元素上的:hover选择器，如下所示：

 .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>