HTML/CSS：ホバー機能が動作しない

Question

ホバー機能は、マウスでdivをホバリングしたときにその効果を適用するのではなく、.htmlファイルを開いたりリフレッシュしたりするとすぐに起こります。コードは作業ホバー機能と同じですが、私はホバーするときに機能しない理由を理解していませんが、代わりにページをリフレッシュします。

提案がありますか？ここで

はHTMLです：

(...)<div class="firstInbetween"> 
     <div class="insideInbetween" style="cursor: pointer"> 
      <p>TRADE</p> 
     </div> 
    </div> (...) 

そして、ここでは、CSSです：事前に

.insideInbetween { 
    background: #5D7075; 
    width: 60px; 
    font-family: 'Open Sans'; 
    font-size: 20px; 
    text-align: center; 
    border: 2px solid red; 
    padding: 25px; 
    margin: auto; 
    margin-top: 50px; 
    color: #333333; 
    -o-transition: background 0.5s linear; 
    -moz-transition: background 0.5s linear; 
    -khtml-transition: background 0.5s linear; 
    -webkit-transition: background 0.5s linear; 
    -ms-transition: background 0.5s linear; 
    transition: background 0.5s linear; 
} 


.insideInbetween:hover { 
    background: #b50000; 
} 

ありがとう！

EDIT：あなたはそれをチェックアウトすることができますので、ここでは完全なファイルがあります：完全なJDSではhttps://jsfiddle.net/arxs6b66/

Answer 1

.insideInbetween { 
 
    background: #5D7075; 
 
    width: 60px; 
 
    font-family: 'Open Sans'; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    border: 2px solid red; 
 
    padding: 25px; 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    color: #333333; 
 
    -o-transition: background 0.5s linear; 
 
    -moz-transition: background 0.5s linear; 
 
    -khtml-transition: background 0.5s linear; 
 
    -webkit-transition: background 0.5s linear; 
 
    -ms-transition: background 0.5s linear; 
 
    transition: background 0.5s linear; 
 
} 
 

 

 
} /* <-- DELETE THIS*/ 
 
.insideInbetween:hover { 
 
    background: #b50000; 
 
} 
 
.secondInside { 
 
    background-color: #123189; 
 
    color: white; 
 
    width: 35%; 
 
    float: left; 
 
    height: 500px; 
 
    margin: 2%; 
 
}

{ホバーする前に、ちょうどそれを削除theresの、それは

の作品