Weiter optionen bei Mouse over

Hallo zusammen,

ich habe folgendes Problem:
Aus einer DB werden Daten ausgelesen und in div’s aufgelistet. Und diese einzelnen Datensätze kann man löschen und zwar mit “Entfernen” in der rechten oberen Ecke.

Nun möchte ich aber, das dieses “Entfernen” nur erscheint wenn der Benutzer mit der Maus über das div-Element fährt. Habe einfach keine Idee für einen Ansatz.

Kann mir jemand weiterhelfen?
Liebe Grüße
Julian

so wie hier im Forum z.B bei “Zitat” steht “Mit Zitat antworten” ?

Ja so wie hier Zitat steht, steht bei mir Entfernen und dieser “Button” soll aber nur eingeblendet werden, wenn der Benutzer mit der Maus über den Eintrag geht.

(So wie bei Wordpress im Adminbereich wenn man mit der Maus über einen Artikel in der Artikelübersicht fährt und dann “Bearbeiten | Schnellbearbeitung…”)

Das ist einfach, dazu gibt’s ein HTML-Element: title
de.selfhtml.org/html/referenz/at … lattribute

definiert einen Titel oder eine kurze Beschreibung für das Element, wird in den meisten Browsern bei Mausberührung als "Tooltip" angezeigt verwendbar in allen Elementen außer:

nein so hab ich das auch nicht gemeint :p

also ich hab ca. soetwas:

<div id="eintrag">
  blablablabla
  <div id="eintragbutton" class="button">entfernen</div>
</div>

und wenn man mit der maus über die div mit der id „eintrag“ geht soll die div mit der id „eintragbutton“ eingeblendet werden. bei mouseout wieder verschwinden.

wo ist da das Problem?

<div id="eintrag" omnouseover="document.getElementById('eintragbutton').style.display = 'block'" omnouseover="document.getElementById('eintragbutton').style.display = 'none'">
  blablablabla
  <div id="eintragbutton" class="button">entfernen</div>
</div>

Das würde es am Anfang aber anzeigen, daher ist diese Methode zu empfehlen:

var eintrag = document.getElementByID('eintrag');
var button = document.getElementByID('eintragbutton');

function display(what, set)
{
   if(set) what.style.display = "block";
   else what.style.display = "none";
}
eintrag.onmouseover = "display(button, true);"
eintrag.onmouseout = "display(button, false);"
display(button, false); //Blended Standardmäßig aus

Wozu dafür JavaScript benutzen, wenn’s CSS auch tut - :hover und der Nachfahrenselektor existieren.

Das ganze würde dann wie aussehen?
Lg

Zwei kleine Regeln - Button normal versteckt, und beim Hovern des Vorfahrenelementes dann sichtbar.

Wenn kein Grundlagenwissen bzgl. CSS vorhanden - dann bitte informieren.

ah ok super. funktioniert schon fast wie ichs mir vorstelle.
kann ich außer display noch was anderes verwenden, weil wenn ich display:none nehme und es dann eingeblendet wird, verschiebt er mir den text…
lg

Wollen wir nicht so sein :ps:

<div id="eintrag">
  blablablabla
  <div id="eintragbutton" class="button">entfernen</div>
</div>

und das CSS:

#eintrag #eintragbutton { display: none; }
#eintrag:hover #eintragbutton { display: block; }

Du kannst da neben display auch andere Eigenschaften
verwenden.
Wenn der Platz reserviert werden soll, empfiehlt sich etwa
visibility: visible/hidden
Das beinflußt nur die Sichtbarkeit, nicht die Existenz an der Stelle
an sich.

ok. danke jetzt passts.

lg