Question

嗨，在下面的代码中，当鼠标悬停时，某些图像没有显示背景。但是由于图像或任何其他原因，一些图像显示背景颜色。

以及如何在鼠标悬停时更改图像，或者可以将图像的颜色改为白色以任何方式可以帮助我

任何人都可以帮助我

.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;
	
     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;
		padding-top:7px;
		font-weight: bold;
     /*    display:block;*/

    }
	
.specilites img:hover {
    background-color: #40E0D0;
}

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

Answer 1

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

<强>更新你可以这样做

.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);
            });

鼠标悬停图像背景颜色没有改变特定的图像

2 个答案: