JavaScript-Style-Eigenschaft mit CSS überschreiben

[Andreas W.]

Hallo,

ich habe folgendes Problem:

Per CSS setze ich eine Hover-Eigenschaft (border-top, border-bottom) auf Listenfelder. Per JavaScript wird beim Klicken auf das Element die Border-Eigenschaft "dauerhaft" gesetzt. Beim Klicken auf ein anderes Element soll der Rahmen des alten Elementes wieder gelöscht werde und die normale Hover-Eigenschaft des CSS Verwendung finden. Das klappt im Firefox auch prima. Leider weigert sich der IE7 standhaft wieder das alte CSS anzuwenden (hover). Wie bringe ich ihn wieder dazu? Oder muss ich dann die Hover-Eigenschaften auch mit JavaScript setzen?

Also noch einmal die Prozedur:

• Beim überfahren mit der Maus wird ein Rahmen per CSS um ein Element gesetzt. Beim Verlassen wieder gelöscht...
• Beim Klicken auf das Element wird per JavaScript ein Rahmen gesetzt, der solange bestehen bleibt, bis auf ein anderes Element geklickt wird.
• Beim Klicken auf ein anderes Element sollen die Hovereigenschaften vom CSS wieder funktionieren.

Hier noch der relevante Code:

CSS:

.input_row {
   font-family: Verdana, sans-serif;
   font-size: 1.0em;
   width:50em;
   /*border-top:1px solid #000;*/
   margin:1px 0 1px 0;
}
.input_row_ta {
   font-family: Verdana, sans-serif;
   font-size: 1.0em;
   width:50em;
   /*border-top:1px solid #000;*/
   margin:1px 0 3.7em 0;
}
.input_row:hover {
   font-family: Verdana, sans-serif;
   font-size: 1.0em;
   width:42em;
   border-top:1px solid #000;
   border-bottom:1px solid #000;
   margin:1px 0 1px 0;
}

JavaScript:

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

var oldRow;

function setBorder(theRow)
{
 if (oldRow)
 {
  oldRow.style.border = "";
 }

theRow.style.width = "42em";
 theRow.style.borderBottom = "1px solid #000";
 theRow.style.borderTop = "1px solid #000";

oldRow = theRow;

return true;
}

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

HTML:

<div class="input_row" onmousedown="setBorder(this);">
  <div id="input_label">Nachname: </div>
  <div id="input_field"><input name="bla" type="text" /></div>
</div>

<div class="input_row" onmousedown="setBorder(this);">
  <div id="input_label">E-Mail-Adresse:</div>
  <div id="input_field"><input name="bla" type="text" /></div>
</div>

Wäre für jeden Tipp dankbar!

Gruß
Andreas

[wahsaga]

hi,

Per CSS setze ich eine Hover-Eigenschaft (border-top, border-bottom) auf Listenfelder. Per JavaScript wird beim Klicken auf das Element die Border-Eigenschaft "dauerhaft" gesetzt. Beim Klicken auf ein anderes Element soll der Rahmen des alten Elementes wieder gelöscht werde und die normale Hover-Eigenschaft des CSS Verwendung finden. Das klappt im Firefox auch prima. Leider weigert sich der IE7 standhaft wieder das alte CSS anzuwenden (hover). Wie bringe ich ihn wieder dazu? Oder muss ich dann die Hover-Eigenschaften auch mit JavaScript setzen?

Für am simpelsten erachte ich nach wie vor die Vorgehensweise, nicht direkt Style-Eigenschaften zu manipulieren - sondern einfach per Javascript dynamisch eine andere Klasse zu vergeben, die die entsprechenden Formatierungen mitbringt.
Die lässt sich auch viel einfacher "rückstandsfrei" wieder entfernen.

gruß,
wahsaga