Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Bei card-hover auch Text-Farbe ändern
#1
Hallo zusammen,

wie kann ich im AMP-Theme beim card-hover gleichzeitig die Text-Farbe ändern?

Danke im Voraus!
SyLu
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin,

willkommen bei uns im Forum :hallo:

Welchen Block in welchem Thema meinst Du ganz genau (Bezeichnung und Screenshot wäre gut).

Bei z.B. diesem Block "Gallery With Image Links" könnte man bei "hover" mit dem "Code Editor" von Mobirise z.B. noch eine Textfarbe hinzufügen (hier Rot):

color: red;

Code:
 @media (min-width: 768px) {
   &:hover .img-caption {
     height: 100%;
     .caption-text {
       background-color: transparent;
       color: red;
       transition: all 0s;
     }
   }
 }


.jpg  Farbe_bei_hover.jpg (Größe: 520,49 KB / Downloads: 14)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Hallo Tommy,

danke für deine nette Begrüßung  Smiling  

Das Theme heißt "StrategyAMP" und der Block ist unterste bei "Features". Anbei ein Screenshot und hier der komplette CSS-Code:


Code:
padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
& when (@bg-type = "color") {
 background-color: @bg-value;
}
& when (@bg-type = "image") {
 background-image: url(@bg-value);
 .mbr-overlay {
   background-color: @overlayColor;
   opacity: @overlayOpacity;
 }
}
.card-wrapper {
 position: relative;
 z-index: 1;
 & when not (@transparentBg) {
   position: relative;
 }
 & when (@showBorders) {
   border: 1px solid @bordersColor;
 }
 @media (max-width: 991px) {
   flex-wrap: wrap;
 }
}
.card-box {
 padding: 4rem 2rem;
 margin: auto;
 max-width: 400px;
}
.container-fluid {
 padding: 0;
}
.mbr-row {
 margin: 0;
}
.card {
 padding: 0;
 background-size: 150%;
 background-position: center;
 transition: background-size 0.5s;
 &:hover {
   background-size: 140%;
   .card-hover {
     opacity: 0;
   }
   .btn {
     border-color: transparent;
   }
 }
}
.card1 {
 background-image: url(@bg1);
}
.card2 {
 background-image: url(@bg2);
}
& when not (@transparentBg) {
 .card-wrapper:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background-color: @hoverBg;
   opacity: 0.5;
   z-index: -1;
 }
}
.card-hover {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background-color: @hoverBg;
 opacity: 1;
 transition: all 0.3s;
}
@media (max-width: 767px) {
 .card {
   background-size: cover;
   &:hover {
     background-size: cover;
   }
 }
 .card-hover {
   opacity: 0;
 }
}

Mein Ziel: Beim Mouseover im gesamten linken ODER rechten Block-Bereich soll sich jeweils dort die Text-Farbe ändern (analog zum Hintergrund-Wechsel, den Mobirise in diesem Block bereits mitliefert).

Schöne Grüße
SyLu


Angehängte Dateien
.png  Bildschirmfoto 2019-02-28 um 11.27.06.png (Größe: 977,86 KB / Downloads: 7)

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Du könntest folgende Klassen in den "hover" Bereich der class="card" einbauen:

Titel:
Zitat:   .card-subtitle {
     color: yellow;
   }

Text:
Zitat:   .card-text {
     color: red;
   }


Code:
.card {
 padding: 0;
 background-size: 150%;
 background-position: center;
 transition: background-size 0.5s;
 &:hover {
   background-size: 140%;
   .card-subtitle {
     color: yellow;
   }
   .card-text {
     color: red;
   }
   .card-hover {
     opacity: 0;
   }
   .btn {
     border-color: transparent;
   }
 }
}


.jpg  CSS-Editor.JPG (Größe: 225,5 KB / Downloads: 8)



.jpg  Hover.jpg (Größe: 515,65 KB / Downloads: 9)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Danke! Doch so bleibt die Text-Farbe beim Card-Mouseover unverändert.

Zitat:Mein Ziel: Beim Mouseover im gesamten linken ODER rechten Block-Bereich soll sich jeweils dort die Text-Farbe ändern (analog zum Hintergrund-Wechsel, den Mobirise in diesem Block bereits mitliefert).
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
... bei mir nicht. Hier mein Test:

http://www.mobirise-tutorials.com/StrategyAMP/

(wird nachher eventuell wieder gelöscht)

... wenn Du den Button (Link) auch noch andersfarbig haben willst, dann schreibe noch an der gleichen Stelle hinzu:

Code:
   .btn-white-outline {
     color: red;
   }
   .btn-white-outline:disabled {
     color: red;
   }

... das wirkt dann aber erst nach dem Publizieren.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Jetzt weiß ich, was ich falsch gemacht habe thumbs up 

Vielen, vielen Dank!
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Größe Formularfeld ändern kfz-fotograf 4 106 08.12.2019, 05:33
Letzter Beitrag: Tommy Herrmann
  Mobirise-Animierten Text nach unten verschieben Thomas Saake 6 105 30.11.2019, 13:47
Letzter Beitrag: Thomas Saake
  Bildgröße ändern Peter Pfaff 3 87 11.11.2019, 18:35
Letzter Beitrag: Tommy Herrmann
  Laufschrift-Text in Mobirise MBR-Parameter Goldschwalbe 8 156 02.11.2019, 08:36
Letzter Beitrag: Goldschwalbe
  Parallax-Effekt ändern? stobi_de 3 118 23.10.2019, 10:42
Letzter Beitrag: stobi_de
  oberer Text wird am Handy verschluckt nof15us 3 105 21.10.2019, 17:03
Letzter Beitrag: nof15us
  Logo in der Mobilien Ansicht ändern jomini 5 200 18.10.2019, 11:54
Letzter Beitrag: jomini
  pfeil nach unten, farbe ändern cxx 18 322 17.10.2019, 10:14
Letzter Beitrag: Martin73
  links immer in der selben farbe Utz29 6 194 20.09.2019, 20:07
Letzter Beitrag: Utz29
  Preisliste? Also text links, preis rechts? stobi_de 28 729 30.07.2019, 08:12
Letzter Beitrag: Tommy Herrmann



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!