Responsive Imagemap für Tablet und Smartphone

[TH@selfhtml]

Liebe Leserinnen und Leser in diesem Forum,

für meine Schülerinnen und Schüler möchte ich in dieser Corona-Zeit nach der Anleitung unter selfhtml-Tutorial ein Suchbild zu Tieren und Pflanzen in der Stadt erstellen, und das funktioniert am PC mit der Maus auch gut. Allerdings nutzen die meisten SuS Smartphone und Tablet, ich kann nicht davon ausgehen, dass jeder und jede Zugang zu einem PC hat. Aber mit diesen Touch-Geräten funktioniert mein Suchbild nicht, auch nicht mit folgender Ergänzung im svg-Code:

<defs>
    <style>
    	circle:focus {
	    fill: red;
	    opacity:0.7;
	  }
      circle:hover {
	    fill: red;
	    opacity:0.7;
	  }
    </style>
  </defs>   

Was mache ich falsch, wie geht es richtig? Mit den Stichworten hover und touch habe ich zum Beispiel den Hinweis auf zusätzlich :focus gefunden, aber damit allein scheint es noch nicht zu funktionieren.

Vielen Dank für hilfreiche Hinweise im Voraus!

Tobias Hilbricht