css 鼠标放上图片变换以及输入框提示信息

最新推荐文章于 2022-11-12 13:01:26 发布

原创最新推荐文章于 2022-11-12 13:01:26 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #按钮输入框

本文介绍如何使用纯CSS实现鼠标悬停时按钮图片的变化效果，并提供了一段实现输入框提示信息的代码示例，当鼠标点击后提示信息会自动消失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.btn{
width:321px; height:65px;
border:0;
margin-left:71px; margin-top:282px;cursor:pointer;
background-image:url(login_btn.png)}
.btn:hover{ background-image:url(login_btn_hover.png)}

<span style="font-family:Arial;BACKGROUND-COLOR: #ffffff">上面代码用css实现鼠标放上后图片改变，免去用js，需要支持html5</span>

<span style="font-family:Arial;BACKGROUND-COLOR: #ffffff"></span>

<span style="font-family:Arial;BACKGROUND-COLOR: #ffffff"></span><pre class="html" name="code"><input name="username" type="text" id="username" class="textinput"
  value="请输入用户名" onfocus="this.value='';" onblur="if(this.value==''){this.value='请输入用户名'}"
   />

上面代码实现输入框的提示信息，鼠标点击后自动消失