kostenloser Webspace werbefrei: lima-city


js: hover deaktivieren

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    simuliertes

    Kostenloser Webspace von simuliertes

    simuliertes hat kostenlosen Webspace.

    Ich möchte mit Javascript den css-Hover-Effekt bei bestimmten Links deaktivieren.
    Weiß jm. wie das geht?
    Grund ist das ich einen schöneren Effekt in javascript realisieren will aber dadurch nicht die nicht-javascript user komplett ausschließen will.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Hallo,

    das solltest Du nicht mit JavaScript machen, sondern mit CSS. Gib den Links doch einfach eine andere CSS-Klasse. In CSS kannst Du dann das Hoververhalten mit

    a:hover {}

    selbst bestimmen. Wenn Du das flexibel im Programm ändern willst brauchst Du dann tatsächlich JavaScript. Hier dann einfach mit

    Objekt.style.class

    dem Objekt eine andere Klasse zuweisen.

    LG

    BigBaer
  4. Autor dieses Themas

    simuliertes

    Kostenloser Webspace von simuliertes

    simuliertes hat kostenlosen Webspace.

    Mit anderen Worten es gibt keine Möglichkeit ,ähnlich wie bei style.display='none', einfluss direkt darauf zu nehmen.
    Dann werde ich dem Objekt einfach eine andere Klasse zuweisen, geht ja auch so.
    Danke für die Hilfe :wave:
  5. nein direkten einfluss kannst du darauf nicht nehemen, die einfachste Idee ist immer diese:
    1.) du gibst deinem body eine Klasse, die anzeigt, dass JS deaktiviert ist und änderst diese dann im body mit einem kleinen Einzeiler:
    <body class="nojs">
    <script type="text/javascript">document.body.className='js';</script>
    2.) du schreibst dein CSS dann entsprechend um, sodass die :hover regeln nur dann greifen, wenn im body die Klasse .nojs steht. Außerdem kannst du auf diese Weise auch verschiedene Effekte wie Bildergallerien auf JS einstellen, und ansonsten gibst du ihnen ein "normales" Layout. Z.B.:
    /* erstmal eine ganz allgemeine Definition für links */
    a { color:black; text-decoration:none; }
    
    /* dann ein :hover-Effekt, falls JS nicht aktiviert ist */
    .nojs a:hover { color:blue; text-decoration:line-throw; }
    
    /* und zum Schluss noch eine Veränderung der allgemeinen Definition,
       falls JS aktiv ist */
    .js a { text-decoration:underline; }

    Ist doch recht simpel, oder?
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!