HTML/CSS：悬停功能不起作用

Question

当我打开/刷新.html文件时，悬停功能，而不是在我用鼠标悬停div时应用它的效果，并且在悬停它时没有任何效果。该代码与工作悬停功能相同，我不明白为什么当我悬停而不是在工作时，而是在页面刷新上。

有什么建议吗？

这里的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; 
} 

提前感谢！

编辑：下面是完整的文件，这样就可以检查出来：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%; 
 
}

在整个JDS

那里有一个{悬停之前，删除它和它的作品