如何在CSS网格中改变悬停时的颜色？

Question

我想给这个CSS网格添加一个悬停效果，但没有成功。我尝试了过渡和不透明度技术，但无济于事。我到底做错了什么？提前感谢您的帮助！下面是代码，或者说这是我正在做的页面。 https:/www.nanosweb.orgi4apagesindex.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

你必须针对 :hover 的元素上的选择器。.card 类，像这样。

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