0

画像とテキストが中央に配置された円になるようにスタイル設定された div があります。ホバリングしないと、円と画像が表示され、テキストは透明になります。ホバリングすると、円の境界線が点滅し始め (Webkit アニメーション)、画像の不透明度が下がり、テキストが見えるようになります。

このコードを Firefox で記述/テストすると、すべてが希望どおりに機能しますが、Chrome ではホバー効果による変更が持続し、持続させたくありません (つまり、画像の不透明度が低下したままで、テキストが表示されたままになります。引き続きただし、div にカーソルを合わせると、境界線が意図したとおりに点滅します。

正しい webkit/moz/ms/o トランジションとアニメーションをすべて取得しましたが、何が問題なのか (または、これが Chrome の使用に起因する欠陥の 1 つに過ぎないのか) を理解できないようです。

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/ 完全にスタイル設定されていません (つまり、画像やものが中央に配置されていません)。ファイアフォックス)。

4

1 に答える 1

1

.matchup追加時にcolor:transparent;

.matchup:hover追加時にcolor: #ff6600;

.matchup p追加時にcolor: inherit;

.matchup:hover pは有効なセレクターではないためです。

ここにフィドルがあります

于 2012-07-05T23:56:54.037 に答える