Link Hover Effekt mit CSS?

Vuruba

Hallo zusammen,

ich bin noch sehr neu und fummel mich gerade seit 3 Wochen durch meine neue Homepage.
Ich benutze das Theme The7 und bin noch ein ziemlicher Neuling was CSS angeht.

Meine Frage wäre:
Ich suche einen CSS Code womit sich meine Links die ich so verlinke in Texte oder auf einer Seite halt einen Hover Effekt haben.
Momentan habe ich nur:

a:hover {
font-weight: bold;
text-decoration: underline;
color: red;
}

Ganz nett aber ich hätte schon gerne etwas in der Richtigung hier: https://codepen.io/P233/pen/EaGAl
Am liebsten den Link Hover Effect 2. Und wie gesagt, es soll nicht für das Hauptmenü sein sondern für die Text auf der Seite, also wenn man da etwas verlinkt.
Könnte mir einer erklären wie ich das mache? Oder mir einen Code basteln?
Das wäre echt toll. Ich habe nun schon 8 Stunden daran gebastelt und gelesen...und verzweifel langsam :(

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Marcus[IS]

Hi,

Das Theme scheint ein kostenpflichtiges Theme zu sein, da wird Hilfe schwer.
Es sei denn du hast mal einen Link zu deiner Seite, wo man sich das mal anschauen kann.

Generell müsstest du schauen, wie die Klasse für die Links innerhalb der Beitrags- / Seitentexte aufgebaut ist.
Ich kann da jetzt nur raten, dass es so was wie .entry-content a:hover oder so sein müsste.
Die CSS Anweisungen sollten sich dann über den Customizer im Bereich zusätzliches CSS ergänzen lassen.

Vuruba

Hallo, Danke erstmal für deine Antwort^^
Ja habe für das Theme bezahlt. Dieses hier: https://themeforest.net/item/the7-resp…s-theme/5556590

Im Customizer war ich auch schon drin und habe probiert aber naja...erfolglos.
Meine Seite wäre https://amenitra.de/
Auf der Seite bei mir sind zb. viele Links: https://amenitra.de/interface-und-…ace-und-addons/
Ich möchte einfach einen schönen Effekt um die Links :( so wie hier zb. auch https://codepen.io/Pelucchi/pen/eZZYdY da gefällt mir das "move-horizontal" sehr gut.
Habe mich gestern auch noch durch so viele Seiten durchgelesen...aber ich komme einfach nicht weiter :(

Sailor56

Danke für den Link zu deiner Seite... leider auch erfolglos, denn die Seite ist im Wartungsmodus und da können wir leider nicht das sehen, was du brauchst, um dein Problem zu lösen!

Vuruba

Zitat von Sailor56

Danke für den Link zu deiner Seite... leider auch erfolglos, denn die Seite ist im Wartungsmodus und da können wir leider nicht das sehen, was du brauchst, um dein Problem zu lösen!

Sorry schon geändert. War gerade noch dran.

Sailor56

Welche Links genau meinst du?... in welchen Texten?

Vuruba

Ja genau hier zb. https://amenitra.de/interface-und-…ace-und-addons/ da habe ich viele.

Sailor56

Dann teste bitte folgendes:

HTML

.wpb_wrapper a {
  color: red;
}
.wpb_wrapper a:hover {
  color: yellow;
}

im Customizer im 'zusätzlichen CSS'.
Damit solltest du gezielt die Links auf dieser Seite (im Text) ansprechen können.
Ich habe da jetzt nur die Schriftfarbe zum testen eingetragen, um zu sehen, ob es überhaupt erfolgreich ist. Das musst du dann natürlich anschließend durch dein 'Wunsch-CSS' ersetzen.

Vuruba

ah schon mal vielen Dank dafür. Dann könnte ich jetzt einfach von hier: https://codepen.io/Pelucchi/pen/eZZYdYmir den raus "move-horizontal" effekt raussuchen und füge dann :

.move-horizontal:after,
.move-horizontal:focus:after,
.move-horizontal:focus:before,
.move-horizontal:hover:after,
.move-horizontal:hover:before {
height: 100%;
width: 5px
}
einfach dazu? Sorry bin echt noch ne Anfängerin

Sailor56

Im Prinzip sollte es genau so gehen... du musst dir das passende CSS aus dem Codepen heraussuchen und ggf dieses CSS und deinen eigenen Code entsprechen anpassen.
Du müsstest dann entweder deinen Links die Klasser '.move-horzontal' geben, was aber sicherlich zu umständlich und auch unnötig wäre... oder du musst das '.move-horizontal' durch deinen Selctor (.wpb_wrapper a) ersetzen. Dazu musst du noch die entsprechenden Formatierung für 'span' mit hinzufügen, denn im Codepen wird der animierte Teil ja mit <span class="move-horizontal"> gekennzeichnet.
Tja... und dann muss natürlich noch alles das auf dein Design angepasst werden... Schriftgröße.. Zeilenhöhe... Farben.. margin... padding und was auch immer noch!
Ich habe mal auf die Schnelle das relevante CSS aus dem Codpen rauskopiert und schon mal den Selector angepasst - ABER(!!!) eine Anpassung an dein Design habe ich noch nicht gemacht.

HTML

.wpb_wrapper a::after,
.wpb_wrapper a:focus::after,
.wpb_wrapper a:focus::before,
.wpb_wrapper a:hover::after,
.wpb_wrapper a:hover::before {
    height: 100%;
    width: 3px
}
.wpb_wrapper a::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 50%
}
.wpb_wrapper a::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 3px;
    height: 100%;
    top: 0;
    left: 50%
}
.wpb_wrapper a:hover::after {
    right: 0
}
.wpb_wrapper a:hover::before {
    left: 0
}
:focus {
    outline: 0
}
::-moz-focus-inner {
    border: 0
}
.wpb_wrapper a {
    margin-bottom: 15px !important;
    font-size: 16px !important;
    display: inline-block !important;
}
.wpb_wrapper a {
    text-transform: uppercase;
    display: inline;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: color 1s ease
}
.wpb_wrapper a:focus,
.wpb_wrapper a:hover {
    outline: 0;
    color: #1B98E0;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    -ms-transition: color 1s ease;
    -o-transition: color 1s ease;
    transition: color 1s ease;
    cursor: pointer
}
.wpb_wrapper a::after,
.wpb_wrapper a::before {
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s
}
.wpb_wrapper a:focus::after,
.wpb_wrapper a:focus::before,
.wpb_wrapper a:hover::after,
.wpb_wrapper a:hover::before {
    outline: 0;
    background-color: #1B98E0;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s
}
.wpb_wrapper a {
    font-size: 3em;
    font-weight: 700;
    position: relative;
    z-index: 2;
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden
}

Alles anzeigen

Füge das mal testweise in dein zusätzliches CSS ein, dann wirst du schon sehen, was ich unter 'anpassen ans eigene Design' meine.
Da ist noch einiges zu machen, für das ich im Moment leider nicht die Zeit habe.

Vuruba

Omg es geht! Wowww vielen vielen Dank. Das hätte ich niemals so hinbekommen! Danke danke!
Darf ich als Anfänger noch eine Frage stellen?
Ich will noch mein Twitter Style später noch anpassen und da brauche ich denke ich ja auch wieder diese Tribute /Selector oder wie man das nennt?! Um dann nur dort den Style zu ändern? Wie findest man das heraus? Meine wie wie bei .wpb_wrapper vorhin auch.

Und danke schon mal für die wunderbare tolle Hilfe hier! Ein tolles Forum!

SEpp55

Das Video wird immer wieder verlinkt!

Externer Inhalt www.youtube.com

Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

Sailor56

So.. jetzt doch - schneller als erwartet.
Hier der an dein Design angepasste Code:

HTML

div.wpb_wrapper p {
    line-height: 2.0em;
}
.wpb_wrapper a::after,
.wpb_wrapper a:focus::after,
.wpb_wrapper a:focus::before,
.wpb_wrapper a:hover::after,
.wpb_wrapper a:hover::before {
    height: 100%;
    width: 3px
}
.wpb_wrapper a::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 50%
}
.wpb_wrapper a::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 3px;
    height: 100%;
    top: 0;
    left: 50%
}
.wpb_wrapper a:hover::after {
    right: 0
}
.wpb_wrapper a:hover::before {
    left: 0
}
:focus {
    outline: 0
}
::-moz-focus-inner {
    border: 0
}
.wpb_wrapper a {
    font-size: 1em !important;
    display: inline-block !important;
}
.wpb_wrapper a {
    display: inline;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: color 1s ease
}
.wpb_wrapper a:focus,
.wpb_wrapper a:hover {
    outline: 0;
    color: #1B98E0;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    -ms-transition: color 1s ease;
    -o-transition: color 1s ease;
    transition: color 1s ease;
    cursor: pointer
}
.wpb_wrapper a::after,
.wpb_wrapper a::before {
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s
}
.wpb_wrapper a:focus::after,
.wpb_wrapper a:focus::before,
.wpb_wrapper a:hover::after,
.wpb_wrapper a:hover::before {
    outline: 0;
    background-color: #1B98E0;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s
}
.wpb_wrapper a {
    font-weight: 700;
    position: relative;
    z-index: 2;
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    padding: 0px 10px;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;   
}

Alles anzeigen

.. und ja... wie @SEpp55 nochmals aufgezeigt hat... der Code gehört ins 'zusätzliche CSS'!

Sailor56

Was bitte ist dein 'Twitter Style'????

Vuruba

Oh wow mein güte vielen vielen vielen Dank! Ihr wisst gar nicht wie sehr ihr mir geholfen habt. Ich war an der Sache nun schon 3 Tage dran....;_; Danke und auch danke für das Video. Das schaue ich mir sofort an! Und nochmal besonderen Dank an @Sailor56!

Vuruba

Zitat von Sailor56

Was bitte ist dein 'Twitter Style'????

Ähmmm ich habe das Plugin: https://de.wordpress.org/plugins/twitter-tweets/ auf meine Seite eingebaut. Aber leider passt es halt überhaupt nicht zum Rest. Deswegen wollte ich die Farben anpassen :) Aber ich denke mal das Video wird mir da weiterhelfen :)

Sailor56

Das hier solltest du noch zu deinem CSS Code... bitte unter den vorherigen Code einfügen, damit die Linkanzeige auf einer deine Unterseiten (ich glaube es war das Ticketsystem) wieder richtig funktioniert.

HTML

.page-id-554 .wpb_wrapper a {
  padding: 20px 0px 25px 85px;
}

Sollte dir sonst noch etwas auffallen, das durch die Änderungen jetzt ungewollt mit verändert wurde, bitte Bescheid geben.

Zu diesem Twitter Style bräuchten wir nicht den Link zum Plugin, sondern auch wieder den Hinweis, wo auf deiner Seite die Änderungen gemacht werden sollen?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Link Hover Effekt mit CSS?

Jetzt mitmachen!