Question

I’ve got a div styled to be a circle with an image and some text centered inside of it.
Without hovering, the circle and image are shown while the text is transparent.
When hovering, the circle border starts flashes (webkit animation), the image’s opacity is lowered, and the text becomes visible.

When writing/testing this code in Firefox, everything works as desired, but on Chrome, the changes from the hover effect persist and I don’t want them to (namely, the image opacity stays lowered, and the text remains visible. Continuing to hover on the div, however, makes the border flash as intended.

I’ve got all the correct webkit/moz/ms/o transitions and animations, but I can’t seem to figure out what’s going wrong (or if this is just one of the deficiencies that comes from using Chrome).

My code for the div and all its elements is:

<div class='players'>
    <div class='row'>
        <div class='span6'>
            <div class='matchup'>
                <p class='team'>SOMETEAMNAME</p>
                <p class='name'>SOMENAME</p>
                <img src='SOMEIMAGE'>
            </div>
        </div>
    </div>
</div>

My CSS code:

.matchup {
    width: 250px;
    height: 250px;
    background: transparent;
    border: 1px solid #ff6600;
    border-radius: 125px;
    display: block;
    margin-left: auto;
    margin-right: auto;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
}
.matchup img {  
    position: static;
    margin-top: -22%;
    opacity: 1;

    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
}
.matchup p {
    font-family: 'Lobster', cursive;
    position: relative;
    text-align: center;
    top: 50%;
    color: transparent; 

    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
}
.team {
    font-size: 25px;
}
.name {
    font-size: 45px;
}
.map {
    font-size: 15px;
    margin-top: -70%;
}
.matchup:hover {
    -webkit-animation: matchup-active 1s infinite;
    -moz-animation: matchup-active 1s infinite;
    -ms-animation: matchup-active 1s infinite;
    -o-animation: matchup-active 1s infinite;
    animation: matchup-active 1s infinite;

    p {
        color: #ff6600;
    }
    img {
        opacity: 0.2;
    }
}

@-webkit-keyframes matchup-active {
    0% {
        border: 1px solid #ff6600;
    }
    50% {
        border: 1px solid transparent;
    }
    100% {
        border: 1px solid #ff6600;
    }
}
@-moz-keyframes matchup-active {
    0% {
        border: 1px solid #ff6600;
    }
    50% {
        border: 1px solid transparent;
    }
    100% {
        border: 1px solid #ff6600;
    }
}
@-o-keyframes matchup-active {
    0% {
        border: 1px solid #ff6600;
    }
    50% {
        border: 1px solid transparent;
    }
    100% {
        border: 1px solid #ff6600;
    }
}
@keyframes matchup-active {
    0% {
        border: 1px solid #ff6600;
    }
    50% {
        border: 1px solid transparent;
    }
    100% {
        border: 1px solid #ff6600;
    }
}

EDIT:
Updated with a jsfiddle: http://jsfiddle.net/sicophrenic/qvJ94/
It’s not styled perfectly (i.e. images and stuff aren’t centered), but the problem I’m having shows up (in Chrome and works fine in Firefox).

Answer 1

on .matchup add color:transparent;

on .matchup:hover add color: #ff6600;

on .matchup p add color: inherit;

because .matchup:hover p is not a valid selector.

here is a fiddle