HTML CSS：只悬停边框颜色不变，只影响内部元素？

Question

所以我正在为我的网站做一些下载链接。但是当我将鼠标悬停在内部元素上时，div的边框颜色不会改变。唯一的一次改变是当我将鼠标悬停在div内的元素上时。所以，我怎样才能使它所以边框颜色会改变，所以它检测是否我将鼠标悬停在DIV没有的元素里面

div.db { 
 
    font-size: 30px; 
 
    color: white; 
 
    margin: 5px; 
 
    float: left; 
 
    border-style: solid; 
 
    border-color: blue; 
 
    text-align: center; 
 
} 
 

 
.db :hover { 
 
    border-color: red; 
 
} 
 
div.db :not(:hover){ 
 
    border-color: blue; 
 
} 
 

 
div.db img { 
 
    width: 220px; 
 
    height: 180px; 
 
} 
 

 
div.db a { 
 
    text-decoration: none; 
 
}

<h3>Downloads:</h3> 
 
<div class="downloads"> 
 
    <div class="db"> 
 
    <a href="null"> 
 
     <img src="wld.png" /> 
 
     <p>Windows</p> 
 
    </a> 
 
    </div> 
 
    <div class="db"> 
 
    <a href="null"> 
 
     <img src="lld.jpg"> 
 
     <p>Linux</p> 
 
    </a> 
 
    </div> 
 
    <div class="db"> 
 
    <a href="null"> 
 
     <img src="ald.jpg"> 
 
     <p>Apple</p> 
 
    </a> 
 
    </div> 
 
</div>

的下载div类可是没有任何代码。

Answer 1

错误的语法造成的多余的空格。

使用.db: hover是不正确，将其更改为.db:hover

等等...

div.db { 
 
    font-size: 30px; 
 
    color: white; 
 
    margin: 5px; 
 
    float: left; 
 
    border-style: solid; 
 
    border-color: blue; 
 
    text-align: center; 
 
} 
 

 
.db:hover { 
 
    border-color: red; 
 
} 
 
div.db:not(:hover){ 
 
    border-color: blue; 
 
} 
 

 
div.db img { 
 
    width: 220px; 
 
    height: 180px; 
 
} 
 

 
div.db a { 
 
    text-decoration: none; 
 
}

<h3>Downloads:</h3> 
 
     <div class="downloads"> 
 
      <div class="db"> 
 
       <a href="null"> 
 
        <img src="wld.png" /> 
 
        <p>Windows</p> 
 
       </a> 
 
      </div> 
 
      <div class="db"> 
 
       <a href="null"> 
 
        <img src="lld.jpg"> 
 
        <p>Linux</p> 
 
       </a> 
 
      </div> 
 
      <div class="db"> 
 
       <a href="null"> 
 
        <img src="ald.jpg"> 
 
        <p>Apple</p> 
 
       </a> 
 
      </div> 
 
     </div>