Within my list, I have a div element wrapped in an anchor tag. Here is an example of the code:
<li>
<a href="http://google.com/">
<div id="tease-info">
<div class="inset-img-border fade"></div>
<img src="/img/img.jpg">
<div id="arrow-right-small"></div>
<h4 class="title">E-mail Marketing</h4>
<p class="title">Messaging That Pays</p>
</div>
</a>
</li>
In my CSS file, I have defined a hover effect for the 'tease-info' section. It looks like this:
#tease-info:hover h4{
color: rgb(191,69,164);
}
The issue arises on iOS devices. When I tap on the list item on my iPad, I see the grey overlay indicating the selection, along with the hover effect. But upon releasing the tap, the link does not redirect me and the hover effect persists.
It appears that the hover state is taking precedence over the anchor tag. What could be causing this behavior?