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
  Mobirise-Kann man die Timeline Linie ändern Thomas Saake 10 178 19.07.2019, 18:01
Letzter Beitrag: Tommy Herrmann
  Mobirise-Dünner Rahmen um Text Thomas Saake 2 55 18.07.2019, 17:39
Letzter Beitrag: Thomas Saake
  in mobirise eingrückte Auflistung im Text geht das funsport 2 100 16.07.2019, 11:12
Letzter Beitrag: Martin73
  Bilder Galerie am Liebsten per Link aufrufen aber auch Versteckt funsport 32 802 30.06.2019, 15:06
Letzter Beitrag: funsport
  User-Daten zum Login ändern Hansi151 4 144 27.06.2019, 21:14
Letzter Beitrag: Hansi151
  Bilder der Website von Mobirise werden nicht angezeigt nur der Text mobikfx750 56 3.471 27.06.2019, 14:10
Letzter Beitrag: c-laus
  Overlay mit Text stobi_de 2 183 08.05.2019, 19:36
Letzter Beitrag: stobi_de
  Reihenfolge Bilder und Text im Handy stobi_de 2 136 07.05.2019, 20:14
Letzter Beitrag: stobi_de
  Textfarbe ändern Gronibeagle 2 171 18.04.2019, 18:16
Letzter Beitrag: Gronibeagle
  auch mal einen Dank an c-laus nof15us 6 313 11.04.2019, 23:45
Letzter Beitrag: barbara0701



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!