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上.matchup:hover添加color:transparent;

添加color: #ff6600;

上.matchup p添加color: inherit;

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

here is a fiddle