CSS 悬停效果在我不想要的时候仍然存在

Question

我有一个 div 样式为圆形，其中包含图像和一些居中的文本。 如果不悬停，则在文本透明时显示圆圈和图像。 悬停时，圆形边框开始闪烁（webkit 动画），图像的不透明度降低，文本变得可见。

在 Firefox 中编写/测试此代码时，一切正常，但在 Chrome 上，悬停效果的更改仍然存在，我不希望它们（即图像不透明度保持降低，文本保持可见） . 然而，继续悬停在 div 上会使边框按预期闪烁。

我已经获得了所有正确的 webkit/moz/ms/o 过渡和动画，但我似乎无法弄清楚出了什么问题（或者这只是使用 Chrome 的缺陷之一）。

我的 div 及其所有元素的代码是：

<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>

我的 CSS 代码：

.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;
    }
}

编辑： 用 jsfiddle 更新：http://jsfiddle.net/sicophrenic/qvJ94/ 它的样式不完美（即图像和东西没有居中），但我遇到的问题出现了（在 Chrome 中并且在 Firefox 中运行良好）。

Answer 1

在.matchup 添加color:transparent;

在.matchup:hover 添加color: #ff6600;

在.matchup p 添加color: inherit;

因为.matchup:hover p 不是有效的选择器。

here is a fiddle