I've been working on creating some buttons with a rollover state. I have an image inside a div with overflow:hidden to hide the inactive state, but sometimes it doesn't work properly.
What's even stranger is that when I inspect the page using Chrome Web Inspector, the issue fixes itself! There doesn't seem to be anything wrong in the HTML or CSS code.
I'm really puzzled as to why it's not consistently broken or functioning correctly.
Here is the snippet of HTML code:
<div class="hunting_card_button">
<div class="hunting_card_icon" id="gift_to_friend">
<img src="/images/icons/friend2.png?1" />
</div>
Friend
</div>
And here are the relevant CSS styles:
.hunting_card_button {
width: 65px;
overflow: hidden;
display: inline-block;
text-align: center;
margin: 0 2px 0 2px;
}
.hunting_card_icon {
position: relative;
right: 0;
}
.hunting_card_icon:hover {
right: 65px;
cursor: pointer;
}