Can not visit link when click on the picture

问题

I have a 2 blocks. Photo and Video. In computer version when I click for them I can visit each link, but in mobile version they do no work, I mean they are not clickable. What is the problem?

    .media-links {
        width: 100%;
    }
    .media-links a {
        display: block;
        /*height: 190px*/
        ;
        width: 40%;
        float: left;
        background-repeat: no-repeat;
        background-size: 100%;
        text-decoration: none;
    }
    .media-links .video-link {
        background-image: url('../img/videos.png');
        margin-right: 10%;
    }
    .media-links .foto-link {
        background-image: url('../img/photos.png');
    }
    .media-links a {
        height: 200px;
    }
    
    @media (max-width: 767px) {
        .media-links a {
            height: 260px;
            margin-bottom: 50px;
            width: 45%;
        }
    }

    <div class="media-links">
    <p><a class="video-link" href="/qalereya/video">Video</a> 
    <a class="foto-link" href="/qalereya/foto-qalereya">foto</a></p>
    </div>

I thought maybe it is due to blocks overlay each other. How can I solve that?

回答1:

4 months ago I lived a problem similar this. When I click a link, I can visit each link, but just apple devices on safari not work. I changed my html link structure and I fixed. Sometimes some device/browser needs touchend event.

If you are living a problem just a device/browser. Maybe this link can help you: iPad/iPhone hover problem causes the user to double click a link

来源：https://stackoverflow.com/questions/54886219/can-not-visit-link-when-click-on-the-picture