[CSS] :hover op de ipad

[CaptainCapslock]

Hallo,

Ik heb een dropdown menu gemaakt zie voorbeeldje: http://jsfiddle.net/Yk7fD/

Als je met de muis over het menu gaat dan krijg je het dropdown menu te zien, dankzij :hover in de CSS code. In android moet je er op 'tappen' om het menu te zien.

Echter in iOS, dus op de iPhone en iPad gebeurt er niets. Heeft iemand hier een oplossing voor?

Cascading Stylesheet:

ul{
 list-style-type: none;   
}

div > ul > li{
 float: left;  
 margin-right: 30px;    
}

div > ul > li > ul {
  position: absolute;
  height: 0px;
  opacity: 0;    
}

div > ul > li:hover > ul {
  height: 30px;
  opacity: 1;    
}

HTML:

<div>
    <ul>
        <li>
            <a href="#">Item 1</a>
        </li>
        <li>
            Item 2
            <ul>
                <li>
                    <a href="#">Item 4</a>
                </li>
                <li>
                    <a href="#">Item 5</a>
                </li>
            </ul>            
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
    </ul>
</div>

Alvast bedankt!

[Drawer]

Hoe zou je willen hoveren op een touchscreen? Hoe zie je dat voor je, voorzichtig aanraken of iets dergelijks?

[CaptainCapslock]

Ja, zoals je kan zien is "item 2" geen link. In Android kan je het toch aanraken, en dan treed het :hover effect in werking.

[Barryvdh]

Je kan op tablets beter werken met klikken, in plaats van hovers. Zoiets bijvoorbeeld:
http://jsfiddle.net/ymKgE/
(Dus ipv :hover, de class .hover, en met jQuery de class .hover meegeven als je op het item klikt)
En dan kan je het beste met een pijltje oid aangeven dat het een dropdown is.

[marko77]

Je kunt ook het 'mouseover' event gebruiken, de iPad maakt daar automatisch een onclick van, dubbelclick wordt dan de onclick. Echter dat is iPad only afaik, dus een click event binden voor alle tablets is de beste oplossing.

[Bosmonster]

Barryvdh schreef op zaterdag 07 april 2012 @ 18:17:
Je kan op tablets beter werken met klikken, in plaats van hovers. Zoiets bijvoorbeeld:
http://jsfiddle.net/ymKgE/
(Dus ipv :hover, de class .hover, en met jQuery de class .hover meegeven als je op het item klikt)
En dan kan je het beste met een pijltje oid aangeven dat het een dropdown is.

Maar dan werkt je menu niet meer zonder javascript en dat is nu juist het grootste voordeel van de door TS gebruikte CSS-methode.

[CaptainCapslock]

Bosmonster schreef op zaterdag 07 april 2012 @ 20:22:
[...]

Maar dan werkt je menu niet meer zonder javascript en dat is nu juist het grootste voordeel van de door TS gebruikte CSS-methode.

Dat is inderdaad mijn punt, ik zou het liefst een CSS only oplossing gebruiken.

quote: marko77

Je kunt ook het 'mouseover' event gebruiken, de iPad maakt daar automatisch een onclick van, dubbelclick wordt dan de onclick.

Als ik niets beters kan vinden zal ik waarschijnlijk voor de onmouseover="" oplossing gaan. Maar het is onlogisch dat voor javascript een mouseover wel wordt omgezet naar een click, terwijl een :hover wordt niet omgezet voor CSS

[marko77]

onlogisch, ach dat valt wel mee, het is meer een feature

[Bosmonster]

CaptainCapslock schreef op zaterdag 07 april 2012 @ 21:07:
[...]

Als ik niets beters kan vinden zal ik waarschijnlijk voor de onmouseover="" oplossing gaan. Maar het is onlogisch dat voor javascript een mouseover wel wordt omgezet naar een click, terwijl een :hover wordt niet omgezet voor CSS

Op zich wel logisch, anders moet je dubbel tappen op iedere link met een :hover. Denk dat dat in de praktijk een beetje vervelend bleek

Daarnaast wordt :hover bijna alleen gebruikt voor visuele styling, dus is het ook niet heel belangrijk. Een dergelijk CSS uitklapmenu is echter wel een van de probleemgevallen.

[ Voor 15% gewijzigd door Bosmonster op 08-04-2012 01:03 ]