如何更改悬停时的背景图像和文本颜色 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: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');
}