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>