Ändern Hintergrundfarbe und Hintergrundbild

Question

Ich möchte meine div Hintergrundfarbe und Bild bei Hover ändern. Genau wie dieser.

ich mit dieser Art und Weise versucht. Aber es hat nur die Hintergrundfarbe geändert. Gibt es einen Weg, um diese Art von Situation zu erreichen?

<div class="col-md-4"> 
    <div class="icon-wrapper"></div> 
    <p>Products</p> 
</div> 

.icon-wrapper { 
    background: url("/assets/human-resources.png"); 
    display: inline-block; 
    background-position: center; 
    background-repeat: no-repeat; 
    border: 1px solid #ddd; 
    height: 120px; 
    position: relative; 
    width: 120px; 
    border-radius: 50%; 
    transition: all 0.2s; 

    img { 
     top: 22%; 
     left: 24%; 
     position: absolute; 
    } 

    &:hover { 
     background: blue; 
     background-position: center; 
     background-repeat: no-repeat; 
     background: url("/assets/car-white.png"); 
    } 
} 

Answer 1

background-color: #6DB3F2; 
background-image: url('images/checked.png'); 

könnten Sie versuchen, diese stattdessen

background: #6DB3F2 url('images/checked.png'); 

Answer 2

zu verwenden, da Sie zwingenden Hintergrund auf schweben Wähler normale Situation das sind. Versuchen Sie background-color:blue; auf Hover-Selektor

Answer 3

In meinem Verständnis versuchen Sie, das Hintergrundbild und die Hintergrundfarbe auf Hover zu ändern, nicht wahr? Try this:

yourElement:hover{ 
    background-color: yellow; 
    background-image: url(../images/bg.gif); 
} 

Answer 4

Ich weiß nicht, alle Layouts Ihrer Website, aber ich kann Ihnen eine kurze Einführung in Pop-ups sagen - wie sie in der richtigen Art und Weise zu erstellen.

Zuerst außerhalb aller anderen div-Blöcke erstellen Sie eine andere Hintergrundmaske (zwischen letzten div Block-Element in HTML und schließenden Body-Tag) - es wird nur als Hintergrundebene (mit absoluter Position), Stil wie gewünscht und setze display none, um es zu verstecken.

Dann erstellen Sie einen weiteren Div-Block für Popup (nicht innerhalb des Hintergrundblocks, aber darunter, Position fixiert, um mit Ihrer Seite zu blättern), erstellen Popup und Stil wie Sie wollen, ausblenden auch (keine anzeigen).

Dies wird Ihnen wiederverwendbare Popup Struktur geben, die Sie, wie oft Sie danach nur neue Popup-Zugabe

unter ersten usw. Block verwenden müssen, um in der Lage, ich weiß, dass es ohne reale Beispiele nur eine Theorie ist, so können Sie ein wenig studieren hier (über Struktur kann jQuery in einfacher Art und Weise verwendet werden):

Reusable modal popups

PS Antwort auf Ihre Frage:

Sie müssen Hintergrundfarbe und Hintergrundbild ändern (im Hover-Zustand). :)

Answer 5

Beispiel 1: Tabelle Zeile Hintergrundfarbe ändern

<table> 
    <tr bgcolor="#777777"> 
     <td>Content Write here...</td> 
    </tr> 
</table> 

Beispiel 2: Wenn Hintergrundbild ändert dann diesen Code verwenden

<div style="background-image: url('bg.jpg');"></div>