css Übergangseffekte auf Hintergrund UND Text auf Hover

Ich versuche, den Übergangseffekt auf Text und Hintergrund auf Hover der Box zu arbeiten, aber mein Ergebnis ist bisher zwei separate Effekte. Wenn ich die Box schwenke, funktioniert der Übergang auf bg gut, aber die Wirkung des Textes passiert nur, wenn ich den Text selbst schwinge. Ich möchte die Farbänderung anwenden, wenn man den ganzen Text nicht mit dem Mauszeiger über den ganzen Text bewegt. Ich brauche die bG-Farbe, um von Schwarz zu Weiß zu wechseln und den Titel von Weiß zu Schwarz zu ändern!css Übergangseffekte auf Hintergrund UND Text auf Hover

mein css ist

.stylish-popular-widget 
 
{ 
 
\t height: 150px; 
 
\t position: relative; 
 
\t width: 100%; 
 
\t 
 
} 
 
.stylish-popular-widget img 
 
{ 
 
\t height: 150px; 
 
\t max-width: 100%; 
 
} 
 
.stylish-popular-widget .meta-text 
 
{ 
 
\t background: rgba(0,0,0,.3); 
 
\t bottom: 0; 
 
\t top: 65%; /*adjust BG start position*/ 
 
\t left: 0; 
 
\t right: 0; 
 
\t position: absolute; 
 
\t text-align: left; 
 
\t padding-left: 10px; 
 
\t moz-transition: 1s; 
 
\t ms-transition: 1s; 
 
\t o-transition: 1s; 
 
\t transition: 1s; 
 
\t webkit-transition: 1s; 
 
} 
 
\t 
 
} 
 
.stylish-popular-widget .meta-text h3 
 
{ 
 
\t color: #FF0000 !important; 
 
\t 
 
} 
 
.stylish-popular-widget .meta-text h3 a 
 
{ 
 
\t color: #fff !important; 
 
\t font-size: 25px; 
 
\t letter-spacing: 1px; 
 
\t 
 
\t 
 
} 
 
.stylish-popular-widget .meta-text h3 a:hover 
 
{ 
 
\t text-decoration: none; 
 
\t color: #000 !important; 
 
\t 
 
} 
 

 
.stylish-popular-widget .meta-text h3 :hover 
 
{ 
 
\t text-decoration: none; 
 
\t color: #000 !important; 
 
\t 
 
} 
 
.stylish-popular-widget .meta-text span.date 
 
{ 
 
\t color: rgba(59,59,59,1); 
 
\t font-size: 11px; 
 
\t letter-spacing: 1px; 
 
\t padding-top: 30px; 
 
\t 
 
} 
 
.stylish-popular-widget:hover > .meta-text 
 
{ 
 
\t background: rgba(255,255,255,.8); \t \t 
 
\t top:inherit; 
 
    top: 0; 
 
\t \t 
 
}

\t \t \t \t <?php ?> 
 
\t \t \t \t 
 
\t \t \t \t <div class="stylish-popular-widget"> 
 
\t \t \t \t \t <a href="<?php echo get_permalink() ?>" rel="bookmark"><?php the_post_thumbnail('popular_posts_img'); ?> 
 
\t \t \t \t \t <div class="meta-text"> 
 
\t \t \t \t \t \t <h3><a href="<?php echo get_permalink() ?>"> 
 
\t \t \t \t \t \t TEST</h3> 
 
\t \t \t \t \t \t <span class="date">thstrhsthths</span></a> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t <?php 
 
\t \t

Quelle

2016-03-27 Costas Vitts

Es wird einfacher sein, wenn Sie ein Online-Beispiel über Jsfiddle oder Codepen gegeben haben. Wie auch immer, Sie müssen entweder '' hover' 'im Wrapping-Block-Element anstatt im Anker (a) -Tag ändern, ODER Sie können den Anker als Block-Element ändern, indem Sie 'display: block' zum Anker hinzufügen und dann könntest du ihm Dimensionen geben. – Narxx

Vielen Dank für Ihre Antwort! Ich bin neu mit Codierung und es tut mir leid für alle meine Fragen und Fehler ... Können Sie mir ein Beispiel mit einer Lösung implementiert? –

Ich hoffe, das hilft: https://jsfiddle.net/msyLj79n/ es ist nur ein Beispiel, aber es gibt viele verschiedene Möglichkeiten, es zu tun. – Narxx

Versuchen Sie folgendes:

.stylish-popular-widget:hover .meta-text h3 a { 
    color: black!important; 
}

Live jsFiddle Demo

Quelle

2016-03-27 10:55:46 Pedram

HEYYYYYY es funktioniert !!!! Kannst du mir erklären, was das Problem war? Ich bin neu mit Codierung und es dauerte mich die ganze Nacht zu versuchen, zu finden, wie es geht! –

Ihre Begrüßung, Sie hatten kein Problem. Sie sollten diese Regel hinzufügen, aber wie funktioniert es? , sollten Sie 'Hover' auf Ihrem Wrapper verwenden, dass Sie den Hover-Effekt passieren möchten, dass in Ihrem Code' .stylish-popular-widget: hover' ist, dann schreiben Sie Ihr Ziel, dass in Ihrem Code '.meta-text h3 ist a, aber Sie müssen die Farbe überschreiben, weil es vorher dauerte, dann sollten Sie 'wichtig' verwenden. – Pedram

danke mann, wirklich geschätzt :) –

} 
.stylish-popular-widget img 
{ 
    height: 150px; 
    max-width: 100%; 
} 
.stylish-popular-widget .meta-text 
{ 
    background: rgba(0,0,0,.3); 
    color:white; 
    bottom: 0; 
    top: 65%; /*adjust BG start position*/ 
    left: 0; 
    right: 0; 
    position: absolute; 
    text-align: left; 
    padding-left: 10px; 
    moz-transition: 1s; 
    ms-transition: 1s; 
    o-transition: 1s; 
    transition: 1s; 
    webkit-transition: 1s; 
} 

} 
.stylish-popular-widget .meta-text h3 
{ 

} 
.stylish-popular-widget .meta-text h3 a 
{ 
    color: inherit !important; 
    font-size: 25px; 
    letter-spacing: 1px; 


} 
.stylish-popular-widget .meta-text h3 a:hover 
{ 
    text-decoration: none; 
    color: inherit !important; 

} 

.stylish-popular-widget .meta-text :hover 
{ 
    text-decoration: none; 
    color:black; 

} 
.stylish-popular-widget .meta-text span.date 
{ 
    color: rgba(59,59,59,1); 
    font-size: 11px; 
    letter-spacing: 1px; 
    padding-top: 30px; 

} 
.stylish-popular-widget:hover > .meta-text 
{ 
    background: rgba(255,255,255,.8);  
    top:inherit; 
    top: 0; 

}

<div class="stylish-popular-widget"> 
        <a href="<?php echo get_permalink() ?>" rel="bookmark"><?php the_post_thumbnail('popular_posts_img'); ?> 
        <div class="meta-text"> 
         <h3><a href="<?php echo get_permalink() ?>"> 
         TEST</h3> 
         <span class="date">thstrhsthths</span></a> 
        </div> 
        </a> 
       </div>

So etwas wie das? Es ist der Meta-Text, der hier die Farben Ihres Textes steuert.

Quelle

2016-03-27 10:37:33 SCJ

Sie müssen nicht unbedingt mehrere :hover es müssen dies zu tun. Sie können Vererbung, je nach Ihrem Design:

.stylish-popular-widget .meta-text { 
    background: rgba(0,0,0,.3); 
    bottom: 0; 
    top: 65%; /*adjust BG start position*/ 
    left: 0; 
    right: 0; 
    position: absolute; 
    text-align: left; 
    padding-left: 10px; 
    moz-transition: 1s; 
    ms-transition: 1s; 
    o-transition: 1s; 
    transition: 1s; 
    webkit-transition: 1s; 
    color: #fff; 
} 

.stylish-popular-widget .meta-text h3 a { 
    font-size: 25px; 
    letter-spacing: 1px; 
    color: inherit; 
} 


.stylish-popular-widget:hover > .meta-text { 
    background: rgba(255,255,255,.8);  
    top: 0; 
    color: black; 
}

Und Sie wahrscheinlich alle jene !important Erklärungen nicht brauchen.

Quelle

2016-03-27 11:36:21

css Übergangseffekte auf Hintergrund UND Text auf Hover

Antwort

Verwandte Themen