如何更改 hover 上的背景圖像和文本顏色 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 上使用 hover 時，我想將img的src更改為'~/AppFiles/Images/HoverTile.png' ，並且在class="caption"中我希望文本的顏色變為white

希望您的建議

Answer 1

添加到您的 css 文件中：

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


}

'標題' 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');
}