时间戳

首页 > 解决方案 > 如何更改悬停时的背景图像和文本颜色 CSS MVC 5

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

问题描述

这是我的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 上时，我想将 的 更改为src，并且我希望文本的颜色更改为img'~/AppFiles/Images/HoverTile.png'class="caption"white

希望您的建议

标签： javascriptcssasp.net-mvchovermousehover

解决方案

添加到您的 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');
}

推荐阅读