Hallo, habe ein kleines Problem. Habe in einer externen CSS-Datei die Hovereigenschaften für Links gesetzt "standard". Nun möchte ich auch, dass das bei folgendem Beispiel passiert. Nur leider wird die Schrift nicht bleu, wenn ich mit der Maus darüber fahre. Hat vielleicht jemand von euch ne Idee?

Das ist der fragliche Code:

<td colspan="14" align="right" class="standard"><div style="cursor:pointer" onClick="history.back()" align="right"><img src="pics/go_back.gif" border="0"> Zurück zur Suche</div></td>

Und das die CSS-Datei:

A.standard:hover {

COLOR: #0000ff;

TEXT-DECORATION: underline

}

danke schon im vorraus

gruß

brixxie

Dein Problem: Du hast gar keinen Link!

<td colspan="14" align="right">

  <div style="cursor:pointer" align="right">

    <a class="standard" href="javascript:history.back()"><img src="pics/go_back.gif" border="0"> Zurück zur Suche</a>

  </div>

</td>

[/PHP]

Und die CSS-Datei:

[PHP]A.standard:hover {
COLOR: #0000ff;
TEXT-DECORATION: underline
}

A => Name deines Tags

standard => dein Classname (bei Verwendung mit dem Namen eines Tags, nur gültig bei diesem Tag (also nur bei Links, nich wie oben bei Tabellenzellen))

Das ich keinen Link habe weiß ich wohl auch... Habe es auch schon mit ".standard.hover" versucht aber geht alles nicht. Hatte gehofft einer weiß, wie ich es schaffe, das der Text beim überfahren mit der Maus Blau wird.

pseudoformate wie :hover :visited etc. kann man nur auf Links anwenden!

du müsstest dir einen workaround basteln, in dem du z.b. per Javascirpt die klasse deines Elements tauschst, und somit die eigenschaften änderst

Kann man da vielleicht was mit "on MouseOver" machen???

du müsstest dir einen workaround basteln, in dem du z.b. per Javascirpt die klasse deines Elements tauschst, und somit die eigenschaften änderst

ja das hab ich gemeint....

ich hab das letzte woche erst gemacht:

moment......Loading......Loading.... ah da isses ja

JS:

// Variable to store the old ClassName for a later reset

var sOldClassName;


// function to show a border arround an Image

function showImageBorder( oImage, sEventType) {

  sOldClassName = oImage.className;


  if ( sEventType == "mouseover") {

    oImage.className = "active";

  } else if ( sEventType == "click") {

    oImage.className = "click";

  }

}



// function to hide borders arround Images

function hideImageBorder( oImage) {

  oImage.className = sOldClassName;

}

CSS:

img {

  border: 0px;

}


img.active {

  border-width: 1px;

  border-style: outset;

  border-color: #FFFFFF;


  padding: 5px;

}


img.inactive {

  /* Padding inactive = Padding active + 1

   da sonst die Symbole "wackeln" beim Border ein/ausblenden */

  padding: 6px;

}

HTML:

.

.

.

*schnipp*

  <table style="width: 100%; height: 100%;" cellspacing="0" cellpadding="0">

  <colgroup>

    <col width="10px" />

    <col width="40px" span="5" />

    <col width="*" span="2" />

  </colgroup>


  <thead class="menubar">


    <tr style="height: 4px;">

      <td colspan="8"></td>

    </tr>

    <tr>

      <td><img src="Images/1px.gif" /></td>

      <td>

        <a href="javascript: history.back();">

          <img src="Images/Buttons/bt_back.gif" class="inactive" onMouseOver="showImageBorder( this, 'mouseover');" onMouseOut="hideImageBorder( this);"/>

        </a>

      </td>

      <td>

        <a href="javascript: history.forward();">

          <img src="Images/Buttons/bt_forward.gif" class="inactive" alt="Close" onMouseOver="showImageBorder( this, 'mouseover');" onMouseOut="hideImageBorder( this);"/>

        </a>

      </td>

      <td>

        <a href="?path=../TestOrdner&do=forcerefresh">

          <img src="Images/Buttons/bt_refresh.gif" class="inactive" alt="Refresh" onMouseOver="showImageBorder( this, 'mouseover');" onMouseOut="hideImageBorder( this);"/>

        </a>

      </td>

      <td>

        <a href="?path=_root_">

          <img src="Images/Buttons/bt_home.gif" class="inactive" alt="Home" onMouseOver="showImageBorder( this, 'mouseover');" onMouseOut="hideImageBorder( this);"/>

        </a>

      </td>

      <td>

        <a href="javascript: self.close();">

          <img src="Images/Buttons/bt_abort.gif" class="inactive" alt="Close" onMouseOver="showImageBorder( this, 'mouseover');" onMouseOut="hideImageBorder( this);"/>

        </a>

      </td>

      <td>

        <input type="text" class="addressbar" name="addressbar" value="TestOrdner" readonly="readonly" maxlength="1024"/>

      </td>

      <td><img src="Images/1px.gif" /></td>

    </tr>

    <tr style="height: 1px;">

      <td colspan="8" style="background-image: url(Images/seperator2.png);"></td>

    </tr>

  </thead>

*schnapp*

.

.

.

damit habe ich eine Menu-leiste "animiert"