你好,在下面的代码中,当鼠标悬停时,一些图像不显示背景。但是由于图像或任何其他原因,一些图像显示背景颜色。
以及如何在鼠标悬停时更改图像,或者可以通过任何可能的方式将图像的颜色更改为白色,请帮助我
谁能帮帮我
.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>
最佳答案
使用背景色代替背景色。
更新 你可以做到这一点
.specilites img:hover {
background-image: url('yourimage.png');
}
关于html - 特定图像的鼠标悬停图像背景颜色没有改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29388378/