Treefrognursery template on touchscreen

[Tata]

I have found a problem with http://treefrognursery.cmsimple.sk when opened on touch screen devices. The four frogs on welcome screen have attached expandable DIVs with "hover" attribute. But on devices with touscreen (iPad/mobile) the "hovering" does not work as expected. How suggest you to solve it?

[lck]

You can try this.
Whenever you use :hover, also use :focus and Fix CSS hover on iPhone & iPad

[Tata]

Thx, will give a try.
@EDIT
extended ":hover" by ":focus"
Nothin has changed. On iPad does it not work. On ":hover" shall the DIV change its height And eexpand shoving the hidden cintent. On click then shall it open the target of the link.
On ":hover" it does nothing, after click it leads to new page. Only on return to previous page the hidden DIV is shown.

[lck]

Interessant, zumindest auf meinem Smartphone HTC Desire S. Klickt man auf eine freie Stelle, z.B. links oder rechts vom Text "TREE FROG NURSERY", so erscheint der verteckte Text wie bei hover. Das heißt das Touch auf eine freie Stelle wird als hover interpretiert. Vielleicht mag das jemand mit anderen mobilen Geräten testen und berichten.

@Tata
You can use/try the useful css3 :target selector, additional to hover.
Hover for Desktop devices, target for mobil devices.

Something like this might work. Not testet! Without the template, it is always a problem.

Create a "Read more" -Link visible over the hidden Text under "TREE FROG NURSERY" with <a href="#readmore">Read more</a>

Give the hidden Text an id <p id="readmore" ...

Hide Text
#readmore {display: none;}

Display Text by hover
.newsbox1-in:hover #readmore {display: block;}

Display Text by target by click the link
#readmore:target {display: block;}