在说正事之前,我要推荐一个福利:(你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>),好了下面开始说正事:
问题描述
请问一下有没有能够实现以下效果的组件?
如何实现鼠标移动到文字上自身产生一个input框,修改里面的值后,点击旁边的√或者×进行修改的组件
开始时是这样的
当鼠标移动上去时
点击后状态
此时可以修改,然后修改完点击√保存
多的是,甚至不需要你再点旁边的勾叉
###给你个参考吧
###通过 :hover 样式控制显示隐藏就可以吧,没有那么复杂吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.showInput {
margin: 100px;
overflow: hidden;
}
.showInput:hover .inputCotr {
display: flex;
}
.showInput:hover .text {
display: none;
}
.text {
display: block;
}
.inputCotr {
display: none;
flex-direction: row;
align-content: center;
}
.btn {
margin-left: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="showInput">
<span class="text">11111</span>
<div class="inputCotr">
<input type="text">
<button class="btn">ok</button>
<button class="btn">cancel</button>
</div>
</div>
</body>
</html>
###那个位置本来就是个input输入框,只是把文本框的border隐藏了,鼠标移上去就显示出来
郑重声明:本站部分内容转载自网络,版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(QQ/微信153890879)修改或删除,多谢。