<a> tag with href has no hover effects css

Question

I have a div with flipper effect when hover it and inside that, I have a tag with href, but no hover effect occurred when I hover it.
I do not know what is wrong with my code.
It has a parent element that has flipper hover effect and its child element that is actually an <a> tag, has no hover effect at all.
I mean no mouse pointer and change in color occurred in <a> tag. I have been playing around with this code all this day and nothing!!

#flippers {
	max-width:994px;
	text-align:center;
}

.flip-container {
	position:relative;
	display: inline-block;
	float:right;
	padding:15px;
	margin-left:32px;
}

.flip-container-final {
	position:relative;
	display: inline-block;
	float:right;
	padding:15px;
}

.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
}

.flip-container:hover {
	background:#CCC;
}

.flip-container, .front, .back {
	width: 280px;
	height: 280px;
}

.flip-container-final:hover .flipper, .flip-container-final.hover .flipper {
	transform: rotateY(180deg);
}

.flip-container-final:hover {
	background:#CCC;
}

.flip-container-final, .front, .back {
	width: 280px;
	height: 280px;
}

.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.front {
	transform: rotateY(0deg);
}

.back {
	transform: rotateY(180deg);
}

.svn-icon-title {
	margin-top:110px;
}

.svn-icon-title a {
	text-decoration:none;
	color:#000;
}

.svn-icon-title a:hover {
	color:#db1616;
}

    <div id="flippers">
        <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
                <div class="front">
                    <img src="image/order.png" />
                </div>
                <div class="back">
                    <img src="image/order-back.png" />
                </div>
            </div>
            <div class="svn-icon-title">
                <a href="phon.php">order</a>
            </div>
            <p>make order</p>
        </div>
        
        <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
                <div class="front">
                    <img src="image/check.png" />
                </div>
                <div class="back">
                    <img src="image/check-back.png" />
                </div>
            </div>
            <div class="svn-icon-title">
                <a href="#">check</a>
            </div>
            <p>check order</p>
        </div>
        
        <div class="flip-container-final" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
                <div class="front">
                    <img src="image/deliver.png" />
                </div>
                <div class="back">
                    <img src="image/deliver-back.png" />
                </div>
            </div>
            <div class="svn-icon-title">
                <a href="#">deliver</a>
            </div>
            <p>deliver order</p>
        </div>
    </div>

Answer 1

the problem seems to be because of the position: absolute; that you'd set on a number of elements (front/back).

What's happening is the text is really behind these elements, so when you hover over the text, you're not hovering over the text, you are hovering over the front/back element instead. So the browser isn't picking up the hover.

To get around this, you could try setting position: absolute on your snv-icon-title class, give it a set width and make sure it has a z-index that is higher than your front/back elements. This should bring the text forward.