Verwendung: Icon Boxen: Mouseover/Hover-Effekt deaktivieren

Malte's Avatar

Malte

28 Oct, 2019 07:32 AM

Produkt: Tao Contao
Contao-Version: 4.8.4
Browser und Browserversionen: Chrome

Ich suche eine Möglichkeit den Mouseover-Effekt zu deaktivieren. Gibt es hierzu eine einfach CSS-Klasse oder eine Möglichkeit über die Custom CSS?

  1. Support Staff 1 Posted by RockSolid Theme... on 28 Oct, 2019 01:09 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Um den Hover-Effekt für die Icon-Boxen zu deaktivieren können Sie folgenden CSS-Code in die custom.css-Datei einfügen:

    *:hover > .icon-boxes-item-icon,
    *:focus > .icon-boxes-item-icon {
        opacity: 1;
    }
    .icon-boxes-item:hover > .icon-boxes-item-link.-link,
    .icon-boxes-item:focus > .icon-boxes-item-link.-link {
        text-decoration: none;
    }
    
  2. 2 Posted by Malte on 29 Oct, 2019 07:23 AM

    Malte's Avatar

    Vielen Dank für die schnelle Antwort.
    Leider hat der zur Verfügung gestellte CSS-Code noch nicht zum gewünschten Erfolg geführt.

    Woran könnte das liegen?
    Ich habe bereits den Browser-Cache geleert und überprüft, ob die custom.css angewendet wird. Beides hat leider ebenfalls nicht geholfen.

  3. Support Staff 3 Posted by RockSolid Theme... on 29 Oct, 2019 10:54 AM

    RockSolid Themes's Avatar

    Der CSS-Code war leider für das falsche Theme. Folgender CSS-Code sollte für das Tao-Theme den gewünschten Effekt bringen:

    .icon-boxes-item:hover:before,
    .icon-boxes-item:focus:before {
        color: #8570a6;
        background-color: white;
    }
    .icon-boxes-item:hover.-inverted-icon:before,
    .icon-boxes-item:focus.-inverted-icon:before {
        color: white;
        background-color: #8570a6;
    }
    .icon-boxes-item:hover > .icon-boxes-item-link.-link,
    .icon-boxes-item:focus > .icon-boxes-item-link.-link {
        text-decoration: none;
    }
    .icon-boxes-item > .icon-boxes-item-link.-link:hover,
    .icon-boxes-item > .icon-boxes-item-link.-link:focus {
        text-decoration: underline;
    }
    

    Sollte die Darstellung dennoch nicht wie gewünscht funktionieren senden Sie uns bitte einen Link zur betroffenen Seite.

  4. 4 Posted by Malte on 30 Oct, 2019 09:32 AM

    Malte's Avatar

    Vielen Dank. Nach Anpassung der Farbcodes auf die von uns verwendeten funktioniert es wie gewünscht.

    Viele Grüße

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac