Mouse Over Text und H2

Allgemeine Fragen
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Mouse Over Text und H2

Ungelesener Beitrag von inno »

Hallo, ist es möglich bei einem Textlink (Fliesstext und H2) einen Farbwechsel (Mouse Over) zu machen?
Habe im CSS versucht das anzupassen:
a:hover {
color: red;

Aber ohne Erfolg. ;-(
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mouse Over Text und H2

Ungelesener Beitrag von Tommy Herrmann »

Ja klar, z.B. das in den (rechten) Bereich "CSS Editor" vom "Code Editor" schreiben:

Code: Alles auswählen

h2:hover {
  background-color: red;
}

<h2>Dieser Bereich vom Text, der zwischen diesem "h2" Tag steht, wird bei Mausüber rot hinterlegt</h2>
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Mouse Over Text und H2

Ungelesener Beitrag von inno »

... das hast du leider falsch verstanden.
Ich möchte gerne für alle Links die ich setze einen HOVER haben, egal ob Text oder Headline.
Im Augenblick wird jeder Verlinkung nur mit einer Farbe hinterlegt und kein Mouse Over, wo die Farbe wechselt!
Geht das in Mobirise?
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mouse Over Text und H2

Ungelesener Beitrag von Tommy Herrmann »

Grundsätzlich geht alles mit Mobirise :)

... weil Du <h2> oder Text "hover" geschrieben hattest "Mouse Over Text und H2" - hatte ich Dich wohl anders verstanden.

In Mobirise wird für Links eine "Bootstrap-Class", wie z.B. class="text-primary", verwendet (je nachdem, welche Farbe Du für den Link bei den globalen (Pinsel) Einstellungen ausgewählt hast). Das sieht dann z.B. so aus:

Code: Alles auswählen

a.text-primary:hover,
a.text-primary:focus {
  color: #0b566f !important;
}
Es wird also der "a" Selektor mit der Class kombiniert.

... mit anderen Worten - normalerweise ist da bereits ein Mausüber (hover) angewendet. Wenn Du andere Farben haben wolltest, dann wiederhole diese Klassen im "CSS Editor" eben mit einer anderen Farbe, wie z.B. "red":

Code: Alles auswählen

a.text-primary:hover,
a.text-primary:focus {
  color: red !important;
}
Das <h2> Tag hat ja zunächst mal gar nicht mit einem Link zu tun. Wolltest Du den Link auch am <h2> Tag haben, dann muss das <a> Tag eben außerhalb stehen - also außen um das <h2> Tag herum.


... ich weiß jetzt natürlich nicht welche der (normalerweise) verfügbaren Farben und Bootstrap-Klassen Du verwendet hast. Dies sind gewöhnlich diese:
CSS hat geschrieben:.text-primary {
color: #149dcc !important;
}
.text-secondary {
color: #ff3366 !important;
}
.text-success {
color: #f7ed4a !important;
}
.text-info {
color: #82786e !important;
}
.text-warning {
color: #cccccc !important;
}
.text-danger {
color: #b1a374 !important;
}
.text-white {
color: #ffffff !important;
}
.text-black {
color: #000000 !important;
}
a.text-primary:hover,
a.text-primary:focus {
color: #0b566f !important;
}
a.text-secondary:hover,
a.text-secondary:focus {
color: #cc0033 !important;
}
a.text-success:hover,
a.text-success:focus {
color: #d2c609 !important;
}
a.text-info:hover,
a.text-info:focus {
color: #4b453f !important;
}
a.text-warning:hover,
a.text-warning:focus {
color: #999999 !important;
}
a.text-danger:hover,
a.text-danger:focus {
color: #7a6e45 !important;
}
a.text-white:hover,
a.text-white:focus {
color: #b3b3b3 !important;
}
a.text-black:hover,
a.text-black:focus {
color: #4d4d4d !important;
}
Das kann aber in anderen Themen/Templates auch ganz anders sein.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mouse Over Text und H2

Ungelesener Beitrag von Tommy Herrmann »

... es gibt natürlich auch die Möglichkeit eine eigene Class zu erstellen, ich nenne diese mal class="meinhover":

Code: Alles auswählen

.meinhover:hover {
  color: red !important;
}
"!important" (wichtig) weil dieses hover von Mobirise bereits ein "!important" erhalten hat.

Dann schreibst Du Deine Class noch da mit an die andere Class dran, also z.B. so:

<a href="#top" class="text-primary meinhover">verlinkter Text</a>

Damit kann es Dir dann egal sein, was da schon vorher von Mobirise definiert wurde. Damit überschreibst Du das einfach.
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Mouse Over Text und H2

Ungelesener Beitrag von inno »

Danke dir für deine Hilfe! :tu: :tu: :tu:
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Mouse Over Text und H2

Ungelesener Beitrag von inno »

Funktioniert! ;-)

Wie kann ich das in der Navi machen?

Danke!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mouse Over Text und H2

Ungelesener Beitrag von Tommy Herrmann »

Vom Gefühl her, solltest Du die Navi so lassen - das könnte schnell nach einem Update wieder alles weg sein.

Da müsste ich aber auch erst gucken und weiß es nicht auswendig. Vielleicht jemand anderes hier oder ich müsste mal morgen gucken.

Kannst ja mal selbst in der CSS-Datei für die Navi forschen:

assets/dropdown/css/style.css

Heute geht nicht, weil ich gerade ein größeres Essen in der Küche zubereite :koch:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mouse Over Text und H2

Ungelesener Beitrag von Tommy Herrmann »

Das kann man aber auch jetzt so "pauschal" gar nicht beantworten.

Jedes Thema hat eine ganz andere Navigationsleiste mit anderer CSS. Manche haben einen Unterstrich oder sogar eine Animation, andere wechseln die Farbe, wieder andere machen nichts.

Da müsstest Du dann schon mal ganz genau Deine Mobirise-Version schreiben und ganz genau das verwendete Thema und ganz genau die verwendete Menüleiste aus diesem Thema (Screenshot).

Dir ist aber auch bewusst, dass Du alle "M4" (Bootstrap) Themen untereinander mischen kannst. Du kannst also unter Hunderten von Menüleisten wählen, auch aus anderen Themen. Ich glaube kaum, dass man da nicht etwas Passendes finden kann, bevor man sich eine große Arbeit macht. Die Menüleisten arbeiten auch teilweise über JavaScript und dann wird es schwierig - außerdem ist das Verhalten an jeder Displaygröße anders - also am Desktop ganz anders als über das "Hamburger-Menü" am Handy.

Daher würde ich da wahrscheinlich eher Abstand von dieser Idee nehmen.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mouse Over Text und H2

Ungelesener Beitrag von Tommy Herrmann »

... nur mal 2 Beispiele (von Hunderten):

Navi "Store M4":

https://mobirise-tutorials.com/Tutorial-Links/

Navi "Voyage M4":

https://mobirise-tutorials.com/VoyageM4/

Hier kannst Du Dir mal nur einige, wenige Themen auf meinen Seiten angucken:

https://mobirise-tutorials.com/Tutorial ... hemen.html
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Mouse Over Text und H2

Ungelesener Beitrag von inno »

... es geht um das neue ARTM4 Theme!
Im Dropdown CSS kann man das nicht einstellen.
Vielleicht weisst du noch einen Rat.

Gruß
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mouse Over Text und H2

Ungelesener Beitrag von Tommy Herrmann »

... Du musst da, wenn Du etwas ganz anders haben möchtest, auch mal etwas suchen. Das findet man doch relativ schnell.

Ich habe hier mal als Beispiel auf einen Navi-Link geklickt und dem ein Rot als Farbe verpasst. Dann habe ich die class="navi-link:hover" in Blau geändert und fertig:

Code: Alles auswählen

.nav-link:hover {
  color: blue !important;
}
CSS-Editor.JPG
nav-link-hover.jpg
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Mouse Over Text und H2

Ungelesener Beitrag von inno »

Haut hin!!!!
Ich danke dir vielmals für die Hilfe!!!!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mouse Over Text und H2

Ungelesener Beitrag von Tommy Herrmann »

prima :tu:

vielleicht zeigst Du uns auch mal Deine Seite (wenn dann halbwegs fertig) ...
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Mouse Over Text und H2

Ungelesener Beitrag von inno »

... das mache ich auf jeden Fall!
Jetzt hab ich aber doch noch eine Frage.
Ich habe das Menü auf "Collapsed" gestellt, weisst du zufällig wie man den Zeilenabstand vergrössern bzw. verkleinern kann. Das wäre super.

Vielen Dank!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mouse Over Text und H2

Ungelesener Beitrag von Tommy Herrmann »

Moin,

in dem Thema "Art M4" sieht es so aus, also würde die Navi hinter dem Hamburger-Menü eine Linien-Höhe von 1.3rem haben (root-em ist 1 gesetzt). 1.3 ist also ca. 30% mehr.

Für "Text" ist das die class="display-7" und für die Größe "Title 2" wäre es dann die class="display-2". Ich weiß ja nicht, welche Größe der Schrift Du gerade verwendest.

Die bei Dir verwendete Größe ("display-?") findest Du gleich hinter der class="navbar-nav nav-dropdown" im Bereich "HTML Editor" vom "Code Editor".

Die Schriftgröße wählst Du ja an der Schrift selbst mittels Klick:

Schriftgröße wählen.jpg

Bitte nochmals merken:

Diese Schriftgrößen sind lediglich eben Größen und keine HTML-Tags. "Title 1" ist also nicht zwingend das "h1" Tag und "Title 2" auch nicht zwingend das "h2" Tag. Dies sind nur willkürlich von Mobirise vorgegebene Schriftgrößen, die eben durch CSS gestaltet werden.


Du könntest die dort verwendete class="display-7" (bei der Wahl von "Text") im Bereich "CSS Editor" (vom "Code Editor") umschreiben, indem Du die Linien-Höhe neu festlegst, z.B. auf 0.5rem. Schreibe das dann einfach ganz unten in den Bereich "CSS Editor" des Menü-Blocks, also z.B. so:

Code: Alles auswählen

.display-7 {
  line-height: 0.5rem;
}
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Mouse Over Text und H2

Ungelesener Beitrag von inno »

Tausend Dank Tommy! Ich versuche das gleich mal!
Top Support! ;)
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Mouse Over Text und H2

Ungelesener Beitrag von inno »

Funktioniert! Wenn das Projekt fertig ist poste ich den Link!
Vielen Dank nochmal für die tolle Hilfe!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Mouse Over Text und H2

Ungelesener Beitrag von Tommy Herrmann »

Hier ist übrigens meine Testseite zu Deinen Fragen:

https://mobirise-tutorials.com/ArtM4/
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot] und 25 Gäste