Direkter Nachbar Selector Smartphone Erstaufruf

[T-Rex]

Moin,

heute komme ich auch mal mit einem css Problem *seufz*.
Und zwar hab ich für einen Kunden einen Hovereffekt erstellt. Der ist auch sehr Simpel:

HTML:

<img src='irgendwas' class='hover' />  
<img src='irgendwas' />  

CSS:

.hover + img  
{  
	display: none;  
	position: absolute;  
	border: 1px solid #c9c9c9;  
	margin-top: 3px;  
	margin-left: -4px;  
	box-shadow: 3px 3px 3px #999;  
}  
  
.hover:hover + img  
{  
	display: block;	  
}

Auf jedem Computer in jedem Browser funktioniert das. Jedoch nicht auf einem Touchfähigem Gerät. Damit meine ich jedoch nicht den Hovereffekt perse.

Problem:
Beim erstmaligen Laden der Seite sieht man img2. Es hat aber nicht position absolute sondern steht im HMTL Fluss. Läd man die Seite erneut, sieht alles wie gewünscht aus. Wird dann jedoch gescrollt (mittels touchscreen), erscheinen alle Bilder.

Entweder hat das Ding ein Problem mit dem direkten Nachbarn Selektor "+" oder mit der pseudoklasse :hover. Problem tritt bei IOS und Android Systemen auf.

Gruß
Der an simplen Problemen aktuell verzweifelnde
T-Rex

[T-Rex]

Erweiterung.

Beim testen hab ich den CSS Code auf ein Minimum reduziert:

.hover + img
{
   display: none;
}

Der Effekt ist der gleiche. Anscheinend verstehen die Touchscreens beim scrollen bzw. nach dem scrollen den "+" Selektor nicht mehr... hmmm...

Gruß
Touch-Rex

[Matthias Apsel]

Om nah hoo pez nyeetz, T-Rex!

Und zwar hab ich für einen Kunden einen Hovereffekt erstellt. Der ist auch sehr Simpel:

HTML:

<img src='irgendwas' class='hover' />

<img src='irgendwas' />

  
Das erscheint mir doch unnötig kompliziert. Warum nicht [so](http://selfhtml.apsel-mv.de/verweise/verweise.html)?  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Penn und Penner](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=P#penn).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[T-Rex]

Gute Idee. In meinem Fall nicht möglich.
Bild1 ist ziemlich klein (62px). Bild2 ist sehr groß (300px).
Bei Hover sieht man das gleiche Bild nur größer. Da das Bild in einer Tabelle eingebunden ist, würde die total zerspringen. Deshalb wird der position absolute gebraucht.

Aber generell natürlich die bevorzugte Art und Weise Bilder zu "tauschen".

Gruß
Diener machender
T-Rex

[suit]

Kannst du mal einen Live-Testcase erstellen?

Ich hab mal das hier gebastelt, funktioniert unter Safari, dem Android Stock Browser und Opera Mobile wie erwartet - allerdings fehlt hier der Position-Kram:
http://jsfiddle.net/qpJYC/

[T-Rex]

Hab deinen HTML Code mal durch Bilder ersetzt. Das Problem tritt nicht auf- komische Sache...

Generell habe ich mehrere Probleme festgestellt. Die Bilder auf der Kundenwebseite haben auch einen roten Rahmen. Wenn man scrollt verschwindet dieser. Aber auch nicht alle Bilder. Ein border: none oder border: 0px solid transparent bringt nichts. outline: none ebenfalls.

Meine Lösung funktioniert durch den Hover effekt jedoch nicht auf touchpads, weshalb der Kunde jetzt doch wieder JS einsetzten möchte.

Ergo hat sich das Problem durch neu Definition der Wünsche gelöst.

Gruß
gelöster
T-Rex

[Gunther]

Hi!

Ich hab mal das hier gebastelt, funktioniert unter Safari, dem Android Stock Browser und Opera Mobile wie erwartet - allerdings fehlt hier der Position-Kram:
http://jsfiddle.net/qpJYC/

Safari!?
Aber nicht unter iOS. Android wendet einen CSS Hover-Effekt bei einem Tap an - iOS nicht.
Und entsprechend "funktioniert" dein jsFiddle auch nicht ... (getestet auf iPad mini iOS 6.1).

Gruß Gunther

[suit]

Safari!?
Aber nicht unter iOS. Android wendet einen CSS Hover-Effekt bei einem Tap an - iOS nicht.
Und entsprechend "funktioniert" dein jsFiddle auch nicht ... (getestet auf iPad mini iOS 6.1).

Ich hab hier ein iPhone 4 mit iOS 5.1 (9B176) und es funktioniert wie erwartet, ein iPad 2 mit iOS 5.1.1 (9B206) tut das ebenfalls - iOS 6.x hab ich grade nix zur Hand.

[Gunther]

Hi!

Ich hab hier ein iPhone 4 mit iOS 5.1 (9B176) und es funktioniert wie erwartet, ein iPad 2 mit iOS 5.1.1 (9B206) tut das ebenfalls - iOS 6.x hab ich grade nix zur Hand.

Das kann ich ehrlich gesagt kaum glauben ...! ;-)

Siehe u.a.:

• http://www.anujgakhar.com/2013/02/14/mobile-safari-css-hover-selector-and-back-button/
• http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

AFAIK ist das ein "generelles" Problem unter *allen* iOS Versionen (7 habe ich noch nicht getestet) und somit betrifft es auch alle Browser (nicht nur den Safari, sondern bspw. auch Chrome, in dem dein Beispiel ebenso nicht funktioniert).

Gruß Gunther

[suit]

Ich hab hier ein iPhone 4 mit iOS 5.1 (9B176) und es funktioniert wie erwartet, ein iPad 2 mit iOS 5.1.1 (9B206) tut das ebenfalls - iOS 6.x hab ich grade nix zur Hand.

Das kann ich ehrlich gesagt kaum glauben ...! ;-)

Siehe u.a.:

• http://www.anujgakhar.com/2013/02/14/mobile-safari-css-hover-selector-and-back-button/
• http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

AFAIK ist das ein "generelles" Problem unter *allen* iOS Versionen (7 habe ich noch nicht getestet) und somit betrifft es auch alle Browser (nicht nur den Safari, sondern bspw. auch Chrome, in dem dein Beispiel ebenso nicht funktioniert).

Ich hab die beiden Artikel jetzt gelesen, aber kann es nicht nachvollziehen - imho sind das keine Probleme sondern es ist das erwartete Verhalten bei diesem Bedienkonzept. Ich hätte das als Eigenheit der Bedienung und nicht als Fehler betrachtet - wenn es ein Fehler wäre, hätte das jemand in der Codebase schon gefixt - aber Opera Mobile und Chrome auf meinem Android-Telefon zeigen ebenfalls dieses Verhalten, kommt mir jedenfalls nicht seltsam vor.

[Gunther]

Hi suit!

Ich hab die beiden Artikel jetzt gelesen, aber kann es nicht nachvollziehen - imho sind das keine Probleme sondern es ist das erwartete Verhalten bei diesem Bedienkonzept. Ich hätte das als Eigenheit der Bedienung und nicht als Fehler betrachtet - wenn es ein Fehler wäre, hätte das jemand in der Codebase schon gefixt - aber Opera Mobile und Chrome auf meinem Android-Telefon zeigen ebenfalls dieses Verhalten, kommt mir jedenfalls nicht seltsam vor.

Also ich bastel seit einiger Zeit an einem Projekt mit einem One-Level Drop-Down Menü.
Und sobald ich im CSS irgendwelche Hover-Styles einfüge, ist das Verhalten von iOS basierten Geräten "unvorhersagbar". Es gab sogar teils Unterschiede im "Verhalten" auf einem iPad 4, jenachdem ob man es im Landscape oder Portrait Modus hielt (und nein, die kamen nicht durch das CSS).

Entweder passiert beim Tippen auf die jeweiligen Elemente einfach gar nichts (so wie bei deinem jsFiddle hier), oder die Elemente werden eingeblendet, lassen sich aber durch nichts wieder ausblenden.

Getestet ist das Ganze auf

• iPhone 4 + 5
• iPad 4
• iPad mini
  unter iOS 5 + 6.

Wohlgemerkt - bei den jeweiligen Elementen handelt es sich *nicht* um Links, also keine 'A' Elemente, sondern um 'LI', bzw. 'SPAN' Elemente.

Auf Android Geräten funktionieren die "Hover-Styles" wie man es erwarten würde - erster Tap aktiviert sie - zweiter Tap entfernt sie wieder. Davon kann bei iOS Geräten keine Rede sein, und ich kann wirklich nicht glauben, dass das bei dir "funktionieren" soll.

Apple hat da mal wieder "Schei..." gebaut ...!

Mich würde mal brennend interessieren, ob bei anderen Usern hier dein jsFiddle auf irgendeinem iOS Gerät funktioniert.

Gruß Gunther

[suit]

Jetzt ist mir klar worauf du hinaus willst - das hab' ich noch nicht ausprobiert:

Wenn ich auf das Element tippe erscheint das 2. Element, wenn ich wo anders hintippe ist es wieder weg - wenn ich aber auf das rote ein zweites Mal tippe, wird die hover-Pseudoklasse nicht entfernt.

Ja, das kann ich bestätigen.

[Gunther]

Wenn ich auf das Element tippe ...

passiert bei mir gar nichts, niente, nada, rien, nothing!
Ich kann machen was ich will, ich kriege das blaue Quadrat *nie* zu sehen!

Ja, das kann ich bestätigen.

Na das ist ja zumindest schon mal ein "Teilerfolg" ...! ;-)

Ich habe für mich aus meinen Erfahrungen den Schluss gezogen, dass ich iOS Geräten_keine_Hover-Styles serviere! Mit JS mache ich es mittels eines 'touchstart' und 'touchend' Event-Handlers, und ohne weiche ich auf ':target' aus.

Gruß Gunther

[suit]

Wenn ich auf das Element tippe ...

passiert bei mir gar nichts, niente, nada, rien, nothing!
Ich kann machen was ich will, ich kriege das blaue Quadrat *nie* zu sehen!

Das ist sehr sparsam :)

[Gunther]

Das ist sehr sparsam :)

Ja, das finde ich wohl auch. ;-)

Und gerade bei einem Menü ist das äußerst "unpraktisch".
Denn selbst wenn der User es noch "irgendwie" schaffen sollte, das entsprechende Untermenü angezeigt zu bekommen, so nutzt das auch nichts, da die Links dann nicht mehr "antippbar" sind ... :-(

Ich habe es auch aufgegeben, herausfinden zu wollen, was jetzt eigentlich genau das Problem ist. Letztendlich habe ich keinen funktionierenden Workaround/ Fix gefunden, weshalb ich eben auf Hover-Styles bei iOS (bis auf weiteres) ganz verzichte.

Gruß Gunther

[T-Rex]

Ich habe es auch aufgegeben, herausfinden zu wollen, was jetzt eigentlich genau das Problem ist.

Manchmal der beste Schutz um nicht durch zu drehen!
Ich komme mehr und mehr zu Auffassung, dass einfache Media Querys nicht reichen um Mobile Sachen gescheit hin zu bekommen. Man braucht ein Mobiles Konzept. Sowohl HTML, als auch CSS, JS und vor allem Bilder. Die kann man dann eine Stufe kleiner Anbieten.

Gruß
Smartphone Hasser
T-Rex

[Gunther]

Ich habe es auch aufgegeben, herausfinden zu wollen, was jetzt eigentlich genau das Problem ist.

Manchmal der beste Schutz um nicht durch zu drehen!

Zumindest immer dann, wenn am Ende doch steht:"Geht nicht!" ;-)
Will sagen, wenn es für eine Sache keinen funktionierenden/ vernünftigen Workaround gibt, spielt das eigentliche Problem zumindest nur eine untergeordnete Rolle.

Ich komme mehr und mehr zu Auffassung, dass einfache Media Querys nicht reichen um Mobile Sachen gescheit hin zu bekommen.

Solange es sich nicht nur um ein "ganz simples Layout" handelt, bei dem alle Inhalte problemlos linear anordbar sind und skalieren, stimme ich dem voll und ganz zu.

Man braucht ein Mobiles Konzept.

Besser ein "responsives Konzept". ;-)

Sowohl HTML, als auch CSS, JS

IMHO reicht das nicht aus. Auch wenn viele jetzt die Nase rümpfen werden, so braucht es zusätzlich auch noch UA-Sniffing (aus mehreren Gründen).
Ich verfolge dabei die Strategie, dass ich, sofern JS aktiviert ist, meine per UA-Sniffing gesetzten Werte entsprechend "korrigieren" lasse, falls nötig.

und vor allem Bilder. Die kann man dann eine Stufe kleiner Anbieten.

Das kommt darauf an. ;-)
SVG ist das Format "der Wahl". Damit hast du zumindest die geringsten Probleme.

Bei Rastergrafiken kommt neben der eigentlichen Größe aber noch die "Device Pixel Ratio" mit ins Spiel.

Gruß Gunther