如何在悬停时更改背景图像和文本颜色 CSS MVC 5

Question

这是我的 div,

<div >
                    <div class="thumbnail text-center">
                        <a href="@Url.Action("Index", "Employees")">
                            <img src="~/AppFiles/Images/Tile.png" class="img-fluid img-thumbnail border border-success">
                            <div class="caption">
                                <p>@Resource.Employee</p>
                                <p>@ViewBag.EmpCount</p>
                            </div>
                        </a>
                    </div>
                </div>

当我悬停在 div 上时，我想将 img 的 src 更改为 '~/AppFiles/Images/HoverTile.png'，而在 class="caption" 中，我想要颜色要更改为 white

的文本

希望得到您的建议

Answer 1

添加到您的 css 文件：

.thumbnail:hover {
 // Write everything you want to happen after hover


}

'caption'class

相同

 .caption:hover {
 color:white;
 }

如果您想使用 javascript 并更改 src：

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" 
onmouseover="hover(this);" onmouseout="unhover(this);" />

function hover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}