Bild bei Mouseover zeigen

Question

Ich versuche, HTML/CSS besser zu lernen, und ich versuche, eine vorhandene Vorlage zu ändern (https://github.com/codrops/AnimatedGridLayout).

Die Vorlage hat ein Rasterlayout, und ich versuche, es so zu machen, dass wenn ein Rasterelement übermoggelt wird, es ein Bild zeigt.

Im HTML sieht der Code wie folgt aus:

   <a class="grid__item" href="#"> 
        <h2 class="title title--preview">Demo</h2> 
        <div class="loader"></div> 
        <span class="category">Love &amp; Hate</span> 
        <div class="meta meta--preview"> 
         <img class="meta__avatar" src="img/authors/2.png" alt="author02" /> 
         <span class="meta__date"><i class="fa fa-calendar-o"></i> 7 Apr</span> 
         <span class="meta__reading-time"><i class="fa fa-clock-o"></i> 5 min read</span> 
        </div> 
       </a> 

In der CSS sieht es so aus:

a:hover, a:focus { 
color: #333; outline: none; 
} 


/* Grid item */ 
.grid__item { 
padding: 45px 55px 30px; 
position: relative; 
color: inherit; 
background: #fff; 
min-height: 300px; 
cursor: pointer; 
text-align: center; 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-direction: normal; 
-webkit-box-orient: vertical; 
-webkit-flex-direction: column; 
-ms-flex-direction: column; 
    flex-direction: column; 
    -webkit-justify-content: center; 
    justify-content: center; 
} 

ich den folgenden Code hinzugefügt, um zu sehen, ob ich eine Wirkung haben könnte bei mouseover:

.grid__item:hover { 
    background-color: yellow; 
} 

Dies machte jedoch keine Änderung. War das nicht der richtige Weg, mit einem Schwebeflug umzugehen?

Jede Hilfe würde sehr geschätzt werden!

Answer 1

Dieser Code css/style2.css hinzufügen

a.grid__item:hover { 
    background: red; 
} 

wenn dies nicht funktioniert

a.grid__item:hover { 
    background: red !important; 
} 

versuchen, wenn dies noch nicht funktioniert versuchen Ihren Browser-Cache STRG + SHIFT + DEL Löschen das funktioniert für fast alle Browser auf Windows

Answer 2

versuchen Verschachtelung eines Elternteils oben, um es richtig zu bekommen ... statt !important versuchen Verschachtelung eine weitere Elternklasse machen es Priorität hoch

section.grid .grid_item:hover { 
    background-color: yellow; 
}