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

当我不想要它时，CSS悬停效果仍然存在

1 个答案: