交互式CSS3地图悬停无法在移动设备上运行

Question

我在codpen上发现了一个交互式地图：-https://codepen.io/scottYg55/pen/QRXxjO，但是css3悬停功能在移动设备上不起作用。有没有办法让它在所有设备上都能正常工作？我确信悬停通常可以正常工作。我将举一个例子：

<div class="point" id="asturias">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 10.5 10.5" style="enable-background:new 0 0 10.5 10.5;" xml:space="preserve">
    <style type="text/css">
        .st5{fill:#EFE30C;}
    </style>
    <path class="st5" d="M7.6,4.7H5.8V2.9c0-0.3-0.2-0.6-0.6-0.6S4.7,2.6,4.7,2.9v1.8H2.9c-0.3,0-0.6,0.2-0.6,0.6s0.2,0.6,0.6,0.6h1.8
        v1.8c0,0.3,0.2,0.6,0.6,0.6s0.6-0.2,0.6-0.6V5.8h1.8c0.3,0,0.6-0.2,0.6-0.6S7.9,4.7,7.6,4.7z"/>
    </svg>
    <div class="info">
        <div class="content_container">
            <div class="title">ASTURIAS</div>
            <div class="text">
                Capital: Oviedo<br>
                Ciudad más poblada: Gijón<br>
                comunidad autónoma uniprovincial<br>
                78 concejos (municipios)<br>
            </div>
        </div>  
    </div>
</div>

Css

.point {
    position: absolute;
    width: 1.3rem;
    height: 1.3rem;
    background-color: #9976dd;
    border-radius: 50%;
    cursor: pointer;
    background-image: url(../img/cross.svg);
    transition: .5s ease-in-out;
}
.point:hover {
    transform: rotate(90deg);
}
.point::after {
    width: 3.9rem;
    height: 3.9rem;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: #6b2fdd;
    border-radius: 50%;
    opacity: 0;
    margin: -1.3rem 0 0 -1.3rem;
    animation: waves 20s infinite;
}
@keyframes waves {
  0% {
    transform: scale(0);
  }
  1% {
    opacity: .7;
  }
  5% {
    opacity: 0;
    transform: scale(1);
  }
}