iOS Touch Hover Issue

HTML

<div class="blocks">
    <a href="stackoverflow.com">
        <div class="block">
            <div class="inner"></div>
        </div>
    </a>
    <a href="stackoverflow.com">
        <div class="block">
            <div class="inner"></div>
        </div>
    </a>
    <a href="stackoverflow.com">
        <div class="block">
            <div class="inner"></div>
        </div>
    </a>
</div>

SCSS

.block {
    width: 30%;
    height: 200px;
    background-color: red;
    float: left;
    margin-right: 5px;
    position: relative;
    outline: solid black 1px;
    
    &:last-child {
        margin-right: 0;
    }
    
    &:hover {
        .inner {
            display: block;
        }
    }
    
    .inner {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: blue;
        display: none;
    }
}