I’m currently facing an issue with the hovering effect on a mobile browser. The hovering effect I have implemented shows text inside a circle only when hovered over by a mouse. However, this does not work on mobile browsers like iPhone. I need to find a solution to make these hovering effects work on mobile devices as well. Additionally, there is a similar hovering effect on a button that works fine. It seems like making the circles clickable might be the key to solving this problem. What steps should I take to address this issue?
Below is the HTML code for the circle:
<ul class="circles">
<li>
<div class="item img-1-services">
<div class="circle-info">
<p class="service">text</p></div>
</div>
<h4>English classes</h4></div>
</div>
</div>
</li>
<li>
</ul>
Here is my CSS:
.item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
text-align: center;
align-items: center;
cursor: pointer;
}
.circles li {
width: 320px;
height: 320px;
display: inline-block;
margin: 20px;
}
.circle-info {
position: absolute;
background: rgba(0,0,0,0.7);
width: inherit;
height: inherit;
border-radius: 50%;
transition: all 0.4s ease-in-out;
transform: scale(0);
}
.item:hover {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
cursor: pointer;
}
.item:hover .circle-info {
transform: scale(1);
}This example showcases one circle, but I have a total of 7 circles each intended to display text upon hover.
Thank you in advance for any assistance provided.