文本框悬停背景图像移动和重新调整大小答案

【问题标题】：Textbox hover background image moves and re-sizes文本框悬停背景图像移动和重新调整大小
【发布时间】：2015-05-14 03:35:38
【问题描述】：

我试图在Kendo UI Textbox 上放置背景图像。

当你不将鼠标悬停在它上面时一切都很好。

但只要将鼠标悬停在它上面，就会发生这种情况：

我该如何解决这个问题？当我将鼠标悬停并单击Textbox 时，图像需要保持在同一位置。

这是用于添加文本框的HTML：

@Html.Kendo().TextBoxFor(vm => vm.Username)

这是用于添加背景的CSS：

#Username.k-textbox{

    background-image:url(/images/User_Icon.svg);       
}

input.k-textbox{
    background-size:19px;
    background-repeat:no-repeat;
    background-position:12px 50%;       
    outline: none;
    display: inline-block;
}

【问题讨论】：

查看你的代码，你的css中没有任何悬停代码，所以很难找到错误。
我想悬停代码是Kendo UI 的一部分，我现在也添加了HTML 代码，用于添加控件。

标签： html css kendo-ui textbox kendo-asp.net-mvc

【解决方案1】：

解决了我自己的问题。我需要用CSS 覆盖Textbox 的悬停设置。

这是添加的附加代码：

input.k-textbox:hover{
    background-size:19px;
    background-repeat:no-repeat;
    background-position:12px 50%;
}

【讨论】：