[CSS] Op PDA/Telefoon 'hover' effect

Pagina: 1
Acties:

Acties:
  • 0 Henk 'm!

  • Kaplan
  • Registratie: November 2003
  • Niet online
Wat gegoogled en hier gekeken, maar nergens een aanwijzing kunnen vinden voor deze vraag:

Is het mogelijk om met CSS een 'hover' effect te creëren op een PDA of Smartphone?

De normale CSS pakt hij prima, maar als je met de stylus over de link gaat, wordt het hover effect niet bereikt. Het is natuurlijk ook geen muis die beweegt...

Iemand een idee hoe dit op een mobiel apparaat te bereiken is met CSS?

Acties:
  • 0 Henk 'm!

  • digital-IMEI
  • Registratie: December 2005
  • Laatst online: 20-09 20:40
In principe gewoon hetzelfde zoals op een PC, werkt het niet, zou ik het persoonlijk links laten liggen. Een browser hoort zich aan de standaarden te houden, doet hij dat niet? Jammer dan. Maar ok, dat is mijn mening.

Als je verder eens wat meer info zou kunnen geven over welke telefoon en/of browser je aan het testen bent zou ook wel eens willen helpen :)

Hoe functioneert je website verder onder "normale desktop browsers"? Werkt het daar wel overal en waar heb je het allemaal in getest?

Acties:
  • 0 Henk 'm!

  • Kaplan
  • Registratie: November 2003
  • Niet online
Het is dus een PDA versie van een kantoorapplicatie.

In de CSS staat o.a.:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#menubalk {
    width: 300px;
    height: 50px;
    display: block;
    text-align: center;
    

}

#menubalk a {
    border: 1px solid #FF9900;
    background-color:#990000;
    color:#FFFFFF;
    width: 50px;
    height: 50px;
    padding: 2px;
    display:inline-block;
    
}

#menubalk a:hover{
    background-color:#FFFFFF;
    color: #990000;
}


en in de HTML staat vervolgens o.a.:

code:
1
2
3
4
5
6
7
8
9
10
11
12
<div id="menubalk">

<a href="indexpda.php?incurl=agenda/agendapda.php" cl>Agenda</a>
    
<a href="indexpda.php?incurl=memo/memopda.php">Memo</a>

<a href="indexpda.php?incurl=actielijst/actielijstpda.php">Actielijst</a>
<br><br>

<a href="indexpda.php?incurl=relaties/relatiespda.php">Relaties</a>
<a href="indexpda.php?incurl=objecten/objectenpda.php">Objecten</a>
</div>


Gewoon simpele code dus. Het probleem is namelijk als je de pagina bijvoorbeeld in de auto oproept en je over de verschillende 'knoppen' stapt met de cursor van de Smartphone IE een klein stippelrandje om de link zet waar je dan op 'staat', maar dat is dus slecht zichtbaar. Ik wil gewoon dat de achtergrondkleur van de knop verandert zodat ik duidelijk zie waar ik sta.

Ik test het op een Sony/Ericsson Xperia X1 met IE op Windows Mobile 6. In Opera Mobile werkt het overigens ook niet...

Acties:
  • 0 Henk 'm!

  • Borizz
  • Registratie: Maart 2005
  • Laatst online: 24-08 20:35
Probeer het eens met :focus dan:

Cascading Stylesheet:
1
2
3
4
#menubalk a:hover, #menubalk a:focus {
    background-color:#FFFFFF;
    color: #990000;
}

If I can't fix it, it ain't broken.


Acties:
  • 0 Henk 'm!

  • Kaplan
  • Registratie: November 2003
  • Niet online
Potver, dat werkt!

ik had wel
code:
1
2
3
4
#menubalk a:hover, #menubalk a:active{
    background-color:#FFFFFF;
    color: #990000;
}


geprobeerd, maar dat werkte dus niet, focus wel!

Toppertje, bedankt! _/-\o_