Question

我有这样的代码http://jsfiddle.net/enr54x1z/
当盘旋时，我想要

将表格单元格背景颜色更改为＃317EAC
将文字更改为白色
将猫图像更改为其他图像

请HELLPPPP

Answer 1

要更改图片，您必须删除img标记，并将其替换为div

的background-image

当您将鼠标悬停在td:hover元素上时，会激活CSS中的<td>。因此，在悬停时应用以下背景颜色。

td:hover{
    background-color:#317EAC;
}

当此元素悬停时，您可以对此进行扩展以应用其他CSS样式。使用以下内容，一旦<td>悬停，我们将转到子元素并应用颜色更改CSS。

td:hover p{
  color:white;
}

使用相同的方法更改悬停时的图片：

td:hover .img-block {
  background-image:url("http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg");
}

Answer 2

 <style type="text/css">
     .imgBox { 
    width: 191px; 
    height: 191px; 
    background: url(image-url) no-repeat; } 

    .imgBox:hover 
    { width: 191px; height: 191px; background: 

    url(other-image-url) no-repeat; } 
    </style>

//your markup can be a div inside your td
    <div class="imgBox"> 
    </div>

在图像悬停时，您需要简单地给出另一个图像的网址！

Here就是你想要的一个例子！

悬停时更改图像和文本颜色

2 个答案: