鼠標懸停圖像背景顏色沒有改變的特定圖像

Question

嗨在下面的代碼中的一些圖像時，鼠標懸停它不顯示background.but一些圖像顯示背景顏色，因爲圖像或任何其他原因。

，以及如何改變圖像時，鼠標懸停或者可以將圖像的色彩更改爲白色任何方式有可能請幫我

任何一個可以幫助我

.specilites{ 
 
    width: 1050px; 
 
    margin: 0 auto 0 auto; 
 
    padding-top:7px; 
 
    color:#008080; 
 
    font-size:30px; 
 
} 
 

 
.specilites img{ 
 

 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    overflow:hidden; 
 
    -webkit-border-radius:50px; 
 
    -moz-border-radius:50px; 
 
    border-radius:50px; 
 
    width:90px; 
 
    height:90px; 
 
    display:inline-block; 
 
\t 
 
    border: 1.5px solid #008080; 
 
} 
 
.specilites h1{ 
 
     width: 1050px; 
 
     margin: 0 auto 0 auto; 
 
     padding-top:7px; 
 
     color:#000000; 
 
     font-size:20px; 
 
    } 
 
.specilites tr { 
 
     font-size:15px; 
 
\t \t padding-top:7px; 
 
\t \t font-weight: bold; 
 
    /* display:block;*/ 
 

 
    } 
 
\t 
 
.specilites img:hover { 
 
    background-color: #40E0D0; 
 
} 
 

 
\t

<div class="specilites"> 
 
\t <h1>Specialties</h1> 
 
     <table> 
 
    \t <tr> 
 
      <td><a href="#"><img src="img/Ambulance-128 (3).png"/></a></td> 
 
\t \t <td><a style="color:#008080" href="#">Accident & Emergency Care</a></td> 
 
      <td><a href="#"><img src="img/Bone-128 (1).png"/></a></td> 
 
\t \t \t <td><a style="color:#008080" href="#">Bone & Joints</a></td> 
 
      <td><a href="#"><img src="img/brain1.png"/></a></td> 
 
\t \t \t <td><a style="color:#008080" href="#">Brains & Nerves</a></td> 
 
\t \t \t <td><a href="#"><img src="img/Astro-Cancer-128 (2).png"/></a></td> 
 
\t \t  <td><a style="color:#008080" href="#">Cancer Care</a></td> 
 
     </tr> 
 
      <td><a href="#"><img src="img/Children-128.png"/></a></td> 
 
\t \t <td><a style="color:#008080" href="#">Child Care</a></td> 
 
      <td><a href="#"><img src="img/clinical.png"/></a></td> 
 
\t \t <td><a style="color:#008080" href="#">Clinical Research</a></td> 
 
\t \t <td><a href="#"><img src="img/Dental-128.png"/></a></td> 
 
\t \t <td><a style="color:#008080" href="#">Dental Care</a></td> 
 
\t \t <td><a href="#"><img src="img/ear,nose.png"/></a></td> 
 
\t \t <td><a style="color:#008080" href="#">Ear,nose & Throat</a></td> 
 
\t \t </tr> 
 
     <tr> 
 
      <td><a href="#"><img src="img/kidneys-128.png" /></a></td> 
 
\t \t <td><a style="color:#008080" href="#">Dialysis & Kidney Transplants</a></td> 
 
\t \t  <td><a href="#"><img src="img/eye.png" /></a></td> 
 
\t \t  <td><a style="color:#008080" href="#">Eye Care</a></td> 
 
\t \t <td><a style="color:#008080" href="#"><img src="img/general_surgery.png" /></a></td> 
 
\t \t <td><a style="color:#008080"href="#">General Surgery</a></td> 
 
\t \t <td><a href="#"><img src="img/genetics.png" /></a></td> 
 
\t \t <td><a style="color:#008080" href="#">Genetics</a></td> 
 
\t \t </tr> 
 
\t \t 
 
\t \t <tr> 
 
      <td><a href="#"><img src="img/Medicine-128 (1).png" /></a></td> 
 
\t \t <td><a style="color:#008080" href="#">General Medicine</a></td> 
 
      <td><a href="#"><img src="img/Football-02-128.png" /></a></td> 
 
\t \t <td><a style="color:#008080" href="#">Sports Medicine</a></td> 
 
\t \t <td><img src="img/Heart-ECG-128.png" /></a></td> 
 
\t \t <td><a style="color:#008080" href="#">ICU & Critical Care</a></td> 
 
\t \t <td><a href="#"><img src="img/home_care.png" /></a></td> 
 
\t \t <td><a style="color:#008080" href="#">Home Care</a></td> 
 
\t \t </tr> 
 
      
 
     </table> 
 
</div>

Answer 1

而不是背景顏色使用背景。

UPDATE 你可以做到這一點

.specilites img:hover { 

    background-image: url('yourimage.png'); 

} 

Answer 2

你嘗試過使用jQuery代碼？

$(document).ready(function() { 
     $('.specialties').mouseenter(function() { 
      $('.specialties').fadeTo('fast', 0.2); 
      }); 
     $('.specialties').mouseleave(function() { 
      $('.specialties').fadeTo('fast', 1); 
      });