Erledigt - hover für div anwenden

beatrix_3000 · 31.01.2019

Guten Tag, ich habe schon geschaut, ob es bereits eine Beantwortung gibt auf mein Problem, aber ich sehe einfach auf dem Schlauch und finde keine Lösung. Mit einem Youtube Video übe ich mich grad andem Aufbau einer Website und komm nun nicht weiter. Ich hoffe hier kann mir jemand helfen.
Ich habe 5 divs, die beim hover die backgroundfarbe und die Schriftfarbe ändern sollen.

Code:

html
<section class="index-links">
        <a href="#">
            <div class="index-boxlink-rectangle">
                <h3>Überschrift1</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ege</p>
            </div>
            </a> <a  href="#">
            <div class="index-boxlink-rectangle">
                <h3>überschrift2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ege</p>
            </div>
            </a> <a href="#">
            <div class="index-boxlink-square">
                <h3>überschrift</h3>
                ....
            </div>
            </a> </section>

Und das css dazu:
.index-links div {
    margin:16px 16px 0;
    width:calc(100% - 32px);
    color: #35475a;
    background:#aeb5bd;
}
.index-links div h3 {
    font-family: 'Work Sans', Helvetica, Arial, Verdana, sans-serif !important;
    padding-top:15px;
    font-size:24px;
    font-size:1.5rem;
    font-weight:300;
    text-align:center;
}
.index-boxlink-square {
width:calc(25% - 20px) !important;
}
.index-boxlink-rectangle {
width:calc(50% - 20px) !important;
}

nun hab ich mir gedacht, dass es ja um die class index-links div gehen muss und versuche mich mit den verschiedensten Varianten:
div.index-links a:hover {
color:fff;
background:#35475a;
}
usw. aber es geht nicht. Kann mir jemand einen tip geben?
Herzlichst Bea

owieortho · 31.01.2019

Code:

div:hover, h3:hover {
  background-color: #15a39e;
  color: #ffffff;
}

an Dein CSS angehängt et voilá... Deine divs ändern die Farben.

Mit dieser Variante wird nur die Farbe des Überschriften-div geändert:

Code:

div.index-links:hover, h3:hover {
  background-color: #15a39e;
  color: #ffffff;
}

Ich denke, Du kannst das Prinzip erkennen.

O.

beatrix_3000 · 02.02.2019

Hallo owieortho,
jipieh, vielen vielen Dank für deine Hilfe. so funktioniert es super.
ein schönes Wochenende
Bea