Button span selektieren funktioniert nicht im Firefox

[ebody]

Hallo,

https://codepen.io/anon/pen/oagvXN

Ich habe einen Button mit einem Bootstrap Glyphicon. Es soll nur das Icon zu sehen sein. Ein :hover soll nur ausgelöst werden, wenn das Icon (<span>) selektiert wird, nicht wenn schon der Button außerhalb des Icons berührt wird.

Das funktioniert im Chrome und IE, aber nicht im Firefox

button#test{
  float: left;
  font-size: 3em;
  background: none;
  border:none;
}

span{
  color: #333;
}

span:hover{
  color: steelblue;
}

/*
button#test:hover span{
  color: steelblue;
}
*/

<button id="test">
  <span class="glyphicon glyphicon-star"></span> 
</button>

Damit es auch im Firefox funktioniert, müsste man es so schreiben

/*
span:hover{
  color: steelblue;
}
*/

button#test:hover span{
  color: steelblue;
}

Im kompletten Code arbeite ich mit Grid. Der ie11, erkennt die komplette Fläche als button#test, auch wenn der Button mit dem Icon viel kleiner als diese Fläche ist und in dieser Fläche zentriert wird. Das lässt sich auch nicht vermeiden, da noch andere HTML Elemente vorhanden sind und die Breite der Spalte erhöhen.

Gibt es eine Möglichkeit im Firefox, das span im Button zu selektieren?

Gruß ebody

[Rolf B]

Hallo ebody,

zur Zeit nicht. Wenn man die zugehörigen Meldungen im Bugzilla von Firefox anschaut, diskutieren die Helden dort schon seit 5 Jahre darüber ob dieses Verhalten Spec-konform ist oder nicht.

Es ist einfach Fakt, dass Firefox keine Events in das DOM innerhalb eines Button hineinlässt. Ein Button ist ein Button, und das innere HTML dient allein der Darstellung, kann aber auf nichts reagieren.

Das gilt für :hover, und auch für einen click auf den Button. Wenn Du dieses Html hast:

<button>
   <span>Foo</span>
</button>

liefert Dir Chrome beim Klick auf Foo den span als event.target, und Firefox liefert den button. Man KANN das als sinnvoll erachten. Das aktive Element ist der Button, nicht der span, darum soll auch der Button das Event-Target sein. In Chrome musst Du erstmal vom span aus nach oben tigern bis Du den Button findest - und wenn Du mit Eventdelegation arbeiten willst dann tigerst Du im Zweifelsfall bis ganz nach oben, bis Du merkst dass Du nichts zu delegieren hat.

Deswegen sind bei Mozilla einige dagegen, das Verhalten zu ändern, wenn ich das richtig verstanden habe.

Und Du bist angeschmiert mit deinem Hover-Span.

Man kann sich sicherlich Lösungen überlegen, wie man den Span nicht als Kind des Button, sondern als Geschwisterknoten einbaut, und ihn dann mit position:absolute über den Button schwenkt. Und mit ein paar Pfund JavaScript bekommt man vielleicht auch noch das Verhalten so hin, dass ein Klick auf den Span wie ein Klick auf den Button wirkt. Aber: LASS DAS. Es wird dann immer Fälle geben, gerade im Bereich der Zugänglichkeit, wo es doch nicht funktioniert.

Ist denn das Aufleuchten des Icons im Button so wichtig? Als Kind eines interaktiven Elements kann das Icon sowieso nicht selbst interaktiv sein, warum möchtest Du Interaktivität vorspiegeln?

Rolf

[Matthias Apsel]

Hallo Rolf B,

Ist denn das Aufleuchten des Icons im Button so wichtig? Als Kind eines interaktiven Elements kann das Icon sowieso nicht selbst interaktiv sein, warum möchtest Du Interaktivität vorspiegeln?

Zudem: color wird vererbt. Also kann doch einfach die Schriftfarbe des Buttons geändert werden?

Bis demnächst
Matthias

[ebody]

Hallo Rolf,

Ist denn das Aufleuchten des Icons im Button so wichtig? Als Kind eines interaktiven Elements kann das Icon sowieso nicht selbst interaktiv sein, warum möchtest Du Interaktivität vorspiegeln?

Ja, es ist ja ein Button und der Hover Effekt soll dem Nutzer zeigen, dass man damit was machen kann. Da nur das Icon sichtbar ist, sollte der Hover Effekt auch möglichst nur dann auftreten, wenn man mit der Maus in der Nähe oder auf dem Icons ist.

So funktioniert es ja auch im Chrome und Firefox...

button#test:hover span{
  color: steelblue;
}

... nur im IE11, steht wie schon beschrieben eine viel zu große Fläche für den Hover Effekt zur Verfügung. Aber das werde ich dann erstmal so in Kauf nehmen.

@@beatovich

Stimmt, das ist hier ja nur ein Beispiel Script. Im echten Script verwende ich Icons, die sehr bekannt sind und im Kontext auch verständlich sind.

Gruß ebody

[Matthias Apsel]

Hallo ebody,

Da nur das Icon sichtbar ist, sollte der Hover Effekt auch möglichst nur dann auftreten, wenn man mit der Maus in der Nähe oder auf dem Icons ist.

Du machst es deinen Nutzern unnötig schwer, wenn du die interaktive Fläche verkleinerst.

Wenn es dein Ziel ist, den Button nur so groß wie das Icon zu machen, kannst du auch
padding: 0; line-height: 0; verwenden. Und dann kannst du auf die Bedienung der interaktiven Elemente reagieren wie vorgesehen:

button:hover span,
button:focus span {
  color: steelblue;
}

Bis demnächst
Matthias

[beatovich]

hallo

https://codepen.io/anon/pen/oagvXN

In einer Website musst du ein interaktives Icon immer mit einem entsprechenden inteaktiven Text versehen. Niemand weiss, was ein Stern bedeutet.