大家好，今天分享一下我做的项目中使用的一些小样式，这些会使你的页面看起来更好看一些，希望可以对你起到帮助！
一、鼠标放在红色区域会有显示退出登录的样式
首先是css格式：
.go_out { font-size: 14px; /* display: block; */ cursor: pointer; right: 48px; width: 80px; height: 40px; background-color: #ffffff; position: fixed; top: 58px; border: 1px #e3e3e3 solid; border-radius: 5px; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); z-index: 10; } /* //鼠标悬停出现背景变色和字体变成蓝色 */ .go_out:hover { background-color: #ECF5FF; color: #409EFF; }
其次就说JS格式：
//点击退出登录的显示小弹窗 let tuichu = document.getElementById('tuichu'); let go_out = document.getElementsByClassName('go_out')[0]; tuichu.onmouseover = function() { $('.go_out').show(); $('.go_out').css('display', 'flex').css('align-items', 'center').css('justify-content', 'center'); } tuichu.onmouseout = function() { $('.go_out').hide() } go_out.onmouseover = function() { $('.go_out').show(); $('.go_out').css('display', 'flex').css('align-items', 'center').css('justify-content', 'center'); } go_out.onmouseout = function() { $('.go_out').hide() }
这里要注意的是先获取到需要显示和隐藏的元素 这里我用的是go_out来命名的，绑定鼠标的移入和移出事件来让其显示或者隐藏就好了
二、鼠标放在input输入框的时候会有边框颜色的变化以及点击以后边框变色
首先是html样式：
<div class="frames_content"> <p class="frames_content_title">员工管理</p> <div class="frames_content_inpt"> <input type="text" placeholder="请输入员工姓名" /> <input type="text" placeholder="请选择公司" style="cursor: pointer;" /> <input type="text" placeholder="请输入项目名称" /> <input type="text" placeholder="请选择档级" style="cursor: pointer;" /> <input type="text" placeholder="请选择证书" style="cursor: pointer;" /> </div> </div>
其次就是css样式：
/* 员工管理标题样式 */ .frames_content_title{ font-size: 25px; } .frames_content_inpt{ margin: 20px 0; display: flex; justify-content: space-between; } .frames_content_inpt input{ width:160px; height: 30px; padding: 0 2.5px; margin-right: 10px; border-radius: 4px; border: 1px #dddddd solid; transition: 0.2s all; outline: none; } .frames_content_inpt input:hover{ border: 1px #bebebe solid; !important } .frames_content_inpt p{ display: flex; justify-content: center; align-items: center; width: 65px; border-radius: 5px; padding: 7px 10px; background-color: #0052CC; color: #ffffff; cursor: pointer; } .frames_content_inpt p:hover{ opacity: 0.8; }
接下来就是js样式了：
// //绑定input框输入事件 let inpt = $('input') for (let i = 0; i < inpt.length; i++) { inpt.eq(i).on('click', () => { inpt[i].style.border = '1px #459EFF solid'; }) inpt.eq(i).on('blur', () => { inpt[i].style.border = '1px #dddddd solid'; }) }
怎么样，是不是很简单呢 希望我的分享可以帮助到你 >W<
