这个只要将元素样式的hover伪类设置边框即可。
<!DOCTYPE html><html lang="en">
<head>
<style>
.div-style1
{
width: 200px
height: 200px
background-color: red
float: left
}
.div-style2
{
width: 200px
height: 200px
background-color: darkgray
float: left
margin-left: 20px
}
.div-style1:hover
{
width: 200px
height: 200px
background-color: red
border: 5px solid black
}
.div-style2:hover
{
width: 200px
height: 200px
background-color: darkgray
-webkit-box-shadow: 0 0 8px black
-moz-box-shadow: 0 0 8px black
box-shadow: 0 0 8px black
}
</style>
<meta charset="UTF-8">
<title>标题一</title>
</head>
<body>
<div class="div-style1">
移上去显示黑框
</div>
<div class="div-style2">
移上去显示阴影
</div>
</body>
</html>
以上就是鼠标移动到元素上显示黑框的一个实例。做了两个效果，一个是边框，一个是阴影。
你好！你这个直接设置一下样式不就得了吗。因为text中的字体本身就是黑色的话，如果你想改变颜色，你直接在其input中加入CSS不就得了吗，你还问本来提示是灰色的字，如果鼠标滑过后输入字就变成黑色的话，那你就增加一下事件和CSS样式设置一个就行了，举例如下：
我现在设置两种CSS样式，f1为灰色字，f2为红色字，在<head></head>之间定义如下：
<style type="text/css">
.f1{color:#CCC}
.f2{color:#000}
</style>
然后我现在在页面上加一个文本输入框，初始值为“鼠标滑过改变字体颜色”，调用f1，默认为灰色字，当鼠标滑过时字体就变为f2黑色字，鼠标离开时变为默认f1灰色字，在<body></body>之间代码如下：
<input name="text" type="text" class="f1" value="鼠标滑过改变字体颜色" onmousemove="this.className='f2'" onmouseout="this.className='f1'" />
希望我的回答能令你满意！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）