Ergebnis 1 bis 11 von 11
  1. #1
    Joerg I. ist offline Grünschnabel
    registriert
    05-01-2013
    Beiträge
    7

    Question Wie kann ich beim Hovern über einen Tag eine Klasse ändern?

    Hallo zusammen,

    ich hab eine JavaScript-Frage, bei der ich nicht so recht weiterkomme. Ich hätte eigentlich gerne eine CSS-Lösung dafür, aber ich glaube, dass es für dieses spezielle Problem keine akzeptable Lösung gibt, die nur CSS verwendet.

    Also, ich habe folgendes Menü:
    HTML-Code:
    <div id="kopf">
      <div id="nav">
        <ul class="current one">.....</ul>
        <ul class="select two">...</ul>
        <ul class="select three">...</ul>
        ...
        <ul class="select six">...</ul>
      </div>
    </div>
    Die Klasse "current" steht immer an irgendeinem dieser ul-Tags. An diesem Tag steht dann nicht die Klasse "select". (Es kann auch sein, dass keiner die Klasse current hat, sondern dass an jedem ul-Tag die Klasse "select" steht.)

    Ich möchte folgendes erreichen:

    Wenn der Nutzer über einen der ul-Tags mit der Klasse "select" hovert, dann soll in dem ul-Tag mit der Klasse "current" an Stelle von "current" die Klasse "select" stehen.

    Könnt ihr mir sagen, wie das geht?
    Geändert von Joerg I. (05-01-2013 um 18:58 Uhr)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Wie kann ich beim Hovern über einen Tag eine Klasse ändern?

    Mit CSS geht das nicht, mit JS schon, ABER mit den geeigneten CSS-Selektoren brauchst du das auch gar nicht.
    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Fenstertitel</title>
    <style type="text/css">
    .container .item, .container:hover .current {
    	border: 1px solid red;
    	margin: 2px;
    	background-color: blue;
    }
    .container .current, .container .item:hover {
    	background-color: red;
    }
    </style>
    </head>
    <body>
    <div class="container">
    	<div class="item current">a</div>
    	<div class="item">a</div>
    	<div class="item">a</div>
    	<div class="item">a</div>
    	<div class="item">a</div>
    	<div class="item">a</div>
    	<div class="item">a</div>
    	<div class="item">a</div>
    </div>
    </body>
    </html>

  3. #3
    Joerg I. ist offline Grünschnabel
    registriert
    05-01-2013
    Beiträge
    7

    AW: Wie kann ich beim Hovern über einen Tag eine Klasse ändern?

    Ohh, geil, das ist ja noch besser! Manchmal sieht man echt den Wald vor lauter Bäumen nicht mehr. Danke schön! :-)

    Also in meinem Fall:
    Code:
    #kopf #nav .current {
      /* Wie bisher */
    }
    
    /* .current wie .select darstellen, wenn das Menü gehovert wird */
    #kopf #nav:hover .current {
     /* _Die_ Styles setzen, so dass es aussieht wie .select
        (in meinem Fall: Hintergrundfarbe! Ggf. mit "!important;" falls es sonst nicht speziell genug ist). */
    }
    Wenn der Nutzer über den ul-Tag mit "current" hovert, soll der weiter so aussehen, als wäre er aktuell=wird gehovert. Evtl. ist auch noch "#kopf #nav:hover .current:hover" bei "#kopf #nav .current" nötig.

    Ich muss noch schauen, wie ich das in mein Menü integriere; mit :hover arbeite ich da schon bei einigen der enthaltenen li-Tags. D.h. ich hab dann in einer Definition an mehreren Tags ein ":hover". Mal schauen, ob das die weltbesten Browser so können. (Kann IE doch im Leben nicht...)
    Geändert von Joerg I. (05-01-2013 um 19:57 Uhr)

  4. #4
    Joerg I. ist offline Grünschnabel
    registriert
    05-01-2013
    Beiträge
    7

    AW: Wie kann ich beim Hovern über einen Tag eine Klasse ändern?

    So, in Firefox und co läuft alles so, wie ich mir das vorstelle. IE ist eh nicht in der Lage das zu machen, was ich will. Dafür muss ich noch ein paar Hintergrundbilder basteln...

  5. #5
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Wie kann ich beim Hovern über einen Tag eine Klasse ändern?

    Zitat Zitat von Joerg I. Beitrag anzeigen
    IE ist eh nicht in der Lage das zu machen, was ich will. Dafür muss ich noch ein paar Hintergrundbilder basteln...
    Sofern du den IE6 verwendest kann ich dir evtl. zustimmen, ansonsten...
    Hoffe ich konnte helfen

  6. #6
    Joerg I. ist offline Grünschnabel
    registriert
    05-01-2013
    Beiträge
    7

    AW: Wie kann ich beim Hovern über einen Tag eine Klasse ändern?

    Zitat Zitat von miniA4kuser Beitrag anzeigen
    Sofern du den IE6 verwendest kann ich dir evtl. zustimmen, ansonsten...
    Die entsprechende Website wird IE6 eh nicht gesondert unterstützen.

    Nein, ich rede z.B. von IE8, also der Version, die alle XP-Nutzer haben. Klar, mit Selectivizr, den diversen Filtern und anderen Krücken kann man da einiges, was der Browser an sich nicht richtig kann, hinbiegen, aber das sind und bleiben alles Krücken und machen wir uns nichts vor: Von Standardkonformität kann da bei Weitem keine Rede sein und das ist doch alles sehr begrenzt.

    Farbverläufe mit mehr als zwei Farben kann IE8 meines Wissens nach trotz alledem nicht.

  7. #7
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Wie kann ich beim Hovern über einen Tag eine Klasse ändern?

    :hover sollte der IE8 aber vollständig unterstützen.

  8. #8
    Joerg I. ist offline Grünschnabel
    registriert
    05-01-2013
    Beiträge
    7

    AW: Wie kann ich beim Hovern über einen Tag eine Klasse ändern?

    In meiner Implementation ist mir bislang noch kein Fehler beim IE8 aufgefallen, aber das heißt ja noch lange nicht, dass der das volständig kann. ;-)

  9. #9
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Wie kann ich beim Hovern über einen Tag eine Klasse ändern?

    Zitat Zitat von Joerg I. Beitrag anzeigen
    Die entsprechende Website wird IE6 eh nicht gesondert unterstützen.

    Nein, ich rede z.B. von IE8, also der Version, die alle XP-Nutzer haben. Klar, mit Selectivizr, den diversen Filtern und anderen Krücken kann man da einiges, was der Browser an sich nicht richtig kann, hinbiegen, aber das sind und bleiben alles Krücken und machen wir uns nichts vor: Von Standardkonformität kann da bei Weitem keine Rede sein und das ist doch alles sehr begrenzt.

    Farbverläufe mit mehr als zwei Farben kann IE8 meines Wissens nach trotz alledem nicht.
    Seid wann geht es denn hier jetzt um Farbverläufe? Klar sind die Gardient-Filter nicht die komfortabelsten, aber dafür schon seid dem IE5.5 verfügbar. Zu dieser Zeit waren Firefox und Chrome noch Fremdwörter...
    Ich will den IE jetzt nicht besonders verteidigen, aber sooo schlecht ist dieser nicht mehr. Das einzige was man M$ vorwerfen kann ist, dass sie keinen IE9 und folgende für Windows XP herausbringen.

    Und zu deiner Standardkonformität: Welcher Standard? Oder meinst du die Empfehlung des W3C?
    Welcher Browser ist denn deiner Meinung nach voll standardkonform was CSS3 angeht?


    Zitat Zitat von Joerg I. Beitrag anzeigen
    In meiner Implementation ist mir bislang noch kein Fehler beim IE8 aufgefallen, aber das heißt ja noch lange nicht, dass der das volständig kann. ;-)
    Genauso wenig heist das, dass alle anderen Browser alles vollständig können...
    Hoffe ich konnte helfen

  10. #10
    Joerg I. ist offline Grünschnabel
    registriert
    05-01-2013
    Beiträge
    7

    AW: Wie kann ich beim Hovern über einen Tag eine Klasse ändern?

    Zitat Zitat von miniA4kuser Beitrag anzeigen
    Seid wann geht es denn hier jetzt um Farbverläufe?
    Farbverläufe waren von Anfang an der einzige Grund, weshalb ich gefragt habe.

    Zitat Zitat von miniA4kuser Beitrag anzeigen
    Klar sind die Gardient-Filter nicht die komfortabelsten, (...)
    Sie sind nicht nur nicht die komfortabelsten; sie stehen halt immer noch auf dem Niveau von vor über 12 Jahren. Sie können - auch in IE8 - einfach nicht das, was andere Browser schon längst können - und das auch noch W3C-konform.

    Zitat Zitat von miniA4kuser Beitrag anzeigen
    Welcher Browser ist denn deiner Meinung nach voll standardkonform was CSS3 angeht?
    Bei IE8 über CSS3-Konformität zu reden ist ungefähr so sinnvoll wie zu überlegen, wie man Dinosaurier mit dem Maschinengewehr bekämpft.

    Zitat Zitat von miniA4kuser Beitrag anzeigen
    Genauso wenig heist das, dass alle anderen Browser alles vollständig können...
    Das hab ich auch nie behauptet.
    Geändert von Joerg I. (06-01-2013 um 19:23 Uhr)

  11. #11
    Joerg I. ist offline Grünschnabel
    registriert
    05-01-2013
    Beiträge
    7

    AW: Wie kann ich beim Hovern über einen Tag eine Klasse ändern?

    @ kkapsner: Nochmal vielen Dank für deine Hilfe! :-)

Ähnliche Themen

  1. Antworten: 1
    Letzter Beitrag: 14-04-2011, 19:15
  2. Antworten: 5
    Letzter Beitrag: 06-06-2008, 06:05
  3. Beim Hovern über ein item eines <select>
    Von Powerslave im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 26-10-2006, 15:45
  4. Antworten: 1
    Letzter Beitrag: 23-05-2002, 18:38
  5. kann ich mir über ein textfeld eine email schicken lassen?
    Von klausbyte im Forum Serverseitige Programmierung
    Antworten: 2
    Letzter Beitrag: 08-07-2001, 16:54

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •