Beim hover element quasi ausblenden

  • Hey,


    ich hab eine Frage und zwar habe ich folgenden html Code:

    Code
    1. <a id="ix-sec-one-blog" href="#">
    2.     <div class="ix-sec-bg" style="background:url(src/assets/blog.svg);"></div>
    3. <span>blog</span>
    4.     <p>Text...</>
    5. </a>

    Das sieht dann in etwas so aus:

    https://i.imgur.com/uHrosHU.png


    Nun, wenn ich über diesen a-Block mit der Maus gehe,dass Hintergrundbild etwas zoomt, dass klappt. Soweit alles gut, aber sobald ich über meinen Text ("text...") gehe oder über mein <span>-Element, dann bricht der Zoom ab. Ich will aber das der Zoom erhalten bleibt, egal über welches Element ich drüber gehe.


    Hoffe es ist Verständlich erklärt - sorry :D

    Mfg

  • 1. du solltest in Zeile 4 den <p> Tag korrekt mit </p> schließen ... nicht mit </>

    2. wie sieht das CSS zu deinem Code aus?

    Das mit dem </> war hier nicht mit aus versehen.


    CSS wie folgt:

  • Dein Code stimmt nicht mit dem überein, was du in deinem Anfangsbeitrag beschrieben hast????

    Du hast du nur ein :hover in Code und dieses :hover beeinflusst nur das <span>blog</span> (opacity)... das Hintergrundbild, welches nach deiner Beschreibung gezoomt werden soll, dürfte gar nicht angezeigt werden, weil das <div> mit diesem Hintergrund keine Höhe hat... und mit 0 Höhe hat der Hintergrund auch keine Höhe!

    Bitte überprüfe das mal und poste den richtigen und vollständigen Code - besser noch einen Link zur Seite.

  • Dein Code stimmt nicht mit dem überein, was du in deinem Anfangsbeitrag beschrieben hast????

    Du hast du nur ein :hover in Code und dieses :hover beeinflusst nur das <span>blog</span> (opacity)... das Hintergrundbild, welches nach deiner Beschreibung gezoomt werden soll, dürfte gar nicht angezeigt werden, weil das <div> mit diesem Hintergrund keine Höhe hat... und mit 0 Höhe hat der Hintergrund auch keine Höhe!

    Bitte überprüfe das mal und poste den richtigen und vollständigen Code - besser noch einen Link zur Seite.

    CSS/LESS:


    html:


    Code
    1. <a id="ix-sec-one-blog" href="blog.php">
    2. <div class="ix-sec-bg" style="background:url(src/assets/blog.svg);"></div>
    3. <span>blog</span>
    4. <p>text</p>
    5. </a>
  • Nun, wenn ich über diesen a-Block mit der Maus gehe,dass Hintergrundbild etwas zoomt, dass klappt.

    ... kann nicht sein - zumindest nicht mit dem HTML und CSS Code, den du gepostet hast!

    Dein <div class="ix-sec-bg"...> hat weiterhin keine Höhenangabe und wird daher auch mit 0px Höhe angezeigt... das Hintergrundbild ist gar nicht sichtbar!

    Es gibt im CSS keine Anweisung, die das 'zoomen' des Hintergrundbildes verursachen könnte.

    Also poste bitte mal den richtigen und vollständigen Code, der bei dir funktioniert .. und dass bitte in der Syntax für CSS und nicht in der Syntax SASS.

    Ebenso lade hier bitte dein Hintergrundbild hoch (blog.svg).

  • NOCHMAL HTML:


    Code
    1. <a id="ix-sec-one-blog" href="blog.php">
    2. <div class="ix-sec-bg" style="background:url(src/assets/blog.svg);"></div>
    3. <span>blog</span>
    4. <p>text</p>
    5. </a>


    Abgesehen davon dass es less war

    hier NOCHMAL CSS:


    Es funktioniert und das Bild ist auch zu sehen!

    HIER IM HOVER: https://i.imgur.com/wibNUjL.png

    HIER OHNE HOVER: https://i.imgur.com/cdqtE4U.png

  • Ja... dann scheint es einen gravierenden Unterschied zwischen deinem System und meinem System zu geben.

    Ich teste das mit WIN 10 und FireFox 72.0.1 (IE11, Edge, Chrome und Opera liefern das gleiche Ergebnis).

    Und bei mir sieht das so aus... ohne hover:

    ohne_hover.jpg

    und so mit hover...

    mit_hover.jpg

    einzige Änderung von mir, ich habe zum testen das Hintergrundbild mit einem bei mir lokal gespeicherten Bild ausgetauscht... das Original von dir habe ich ja nicht.

    Achte im oberen Bild mal auf die eingeblendete Größenangabe des 'div'.

  • Teste doch bitte mal, ob der folgende Code bei dir funktioniert... zuerst den Inline Style mit dem 'background:url....' aus dem HTML Code löschen und dann den CSS Code zusätzlich deinem CSS Code hinzufügen.

  • Habe das Bild in "Dateianhänge" hochgeladen. Anscheinend ist SVG nicht erlaubt.


    Hatte ein Fehler im Quellcode den ich Ihnen geschickt habe.

    Wie gesagt nutze LESS, war für mich etwas unübersichtlich auf das CSS zu schauen :D



    Hier noch mal CSS:

    Link zum Bild schicken.

    https://www.flaticon.com/free-…m=blog&page=1&position=27

  • Ja... jetzt sind wir wohl auf dem gleichen Stand.

    Auf die Schnelle fällt mir da erst mal ein pointer-events: none; im CSS für das <span>...</span> und <p>...</p> Element ein, um den Zoom-Effekt aufrecht zu erhalten.

    Hat aber den Nachteil, dass du diese Beiden Elemente danach nicht mehr als Link nutzen kannst, denn ein Klick auf diese Elemente würde immer das darunterliegnde <a> treffen.

    Solltest du beabsichtigen irgendwann mal die zB die Schaltfläche BLOG als Link nutzen zu wollen, müsstest du den Code anders aufbauen... vielleicht würde da meine Idee aus Beitrag #9 besser funktionieren - habe ich aber nicht ausprobiert..

  • Ja... jetzt sind wir wohl auf dem gleichen Stand.

    Auf die Schnelle fällt mir da erst mal ein pointer-events: none; im CSS für das <span>...</span> und <p>...</p> Element ein, um den Zoom-Effekt aufrecht zu erhalten.

    Hat aber den Nachteil, dass du diese Beiden Elemente danach nicht mehr als Link nutzen kannst, denn ein Klick auf diese Elemente würde immer das darunterliegnde <a> treffen.

    Solltest du beabsichtigen irgendwann mal die zB die Schaltfläche BLOG als Link nutzen zu wollen, müsstest du den Code anders aufbauen... vielleicht würde da meine Idee aus Beitrag #9 besser funktionieren - habe ich aber nicht ausprobiert..

    Nun, zweck war es, die ganze Fläche als Link zu nutzen.


    DONE;


    Es funktioniert, hat sich erledigt - Danke!