1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Link Hover Effekt mit CSS?

Dieses Thema im Forum "Design" wurde erstellt von Vuruba, 28. Juni 2018.

  1. Vuruba

    Vuruba Active Member

    Registriert seit:
    28. Juni 2018
    Beiträge:
    29
    Zustimmungen:
    0
    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 :(
     
    #1 Vuruba, 28. Juni 2018
  2. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    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.
     
    #2 Marcus[IS], 28. Juni 2018
  3. Vuruba

    Vuruba Active Member

    Registriert seit:
    28. Juni 2018
    Beiträge:
    29
    Zustimmungen:
    0
    Hallo, Danke erstmal für deine Antwort^^
    Ja habe für das Theme bezahlt. Dieses hier: https://themeforest.net/item/the7-responsive-multipurpose-wordpress-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-addons/mein-inferface-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 :(
     
    #3 Vuruba, 29. Juni 2018
  4. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    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!
     
    #4 Sailor56, 29. Juni 2018
  5. Vuruba

    Vuruba Active Member

    Registriert seit:
    28. Juni 2018
    Beiträge:
    29
    Zustimmungen:
    0
    Sorry schon geändert. War gerade noch dran.
     
    #5 Vuruba, 29. Juni 2018
  6. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Welche Links genau meinst du?... in welchen Texten?
     
    #6 Sailor56, 29. Juni 2018
  7. Vuruba

    Vuruba Active Member

    Registriert seit:
    28. Juni 2018
    Beiträge:
    29
    Zustimmungen:
    0
    #7 Vuruba, 29. Juni 2018
  8. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Dann teste bitte folgendes:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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.
     
    #8 Sailor56, 29. Juni 2018
  9. Vuruba

    Vuruba Active Member

    Registriert seit:
    28. Juni 2018
    Beiträge:
    29
    Zustimmungen:
    0
    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
     
    #9 Vuruba, 29. Juni 2018
  10. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    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:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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.
     
    #10 Sailor56, 29. Juni 2018
    danielgoehr gefällt das.
  11. Vuruba

    Vuruba Active Member

    Registriert seit:
    28. Juni 2018
    Beiträge:
    29
    Zustimmungen:
    0
    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!
     
    #11 Vuruba, 29. Juni 2018
  12. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    Das Video wird immer wieder verlinkt!

     
    #12 SEpp55, 29. Juni 2018
    Vuruba gefällt das.
  13. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    So.. jetzt doch - schneller als erwartet.
    Hier der an dein Design angepasste Code:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    .. und ja... wie @SEpp55 nochmals aufgezeigt hat... der Code gehört ins 'zusätzliche CSS'!
     
    #13 Sailor56, 29. Juni 2018
    Vuruba gefällt das.
  14. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Was bitte ist dein 'Twitter Style'????
     
    #14 Sailor56, 29. Juni 2018
  15. Vuruba

    Vuruba Active Member

    Registriert seit:
    28. Juni 2018
    Beiträge:
    29
    Zustimmungen:
    0
    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!
     
    #15 Vuruba, 29. Juni 2018
  16. Vuruba

    Vuruba Active Member

    Registriert seit:
    28. Juni 2018
    Beiträge:
    29
    Zustimmungen:
    0
    Ä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 :)
     
    #16 Vuruba, 29. Juni 2018
  17. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    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:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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?
     
    #17 Sailor56, 29. Juni 2018
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden