CSS项目中去实现样式改变

雷霆半月斩掉你的板砖

于 2023-11-15 14:54:29 发布

阅读量107

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/Mxy18851251178/article/details/134419663

版权

大家好，今天分享一下我做的项目中使用的一些小样式，这些会使你的页面看起来更好看一些，希望可以对你起到帮助！

一、鼠标放在红色区域会有显示退出登录的样式

首先是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<