自定义标签title显示

最新推荐文章于 2022-09-13 18:21:58 发布

hp-future

最新推荐文章于 2022-09-13 18:21:58 发布

阅读量155

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42497122/article/details/113685233

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			#app{
				width: 300px;
				margin: 200px auto;
				text-align: center;
				background-color: #eee;
				cursor: pointer;
				position: relative;
			}
			#app p {
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			#custom {
				position: absolute;
				left: 50%;
				bottom: calc(100% + 10px);
				transform: translateX(-50%);
				max-width: calc(100vw - 20px);
				background-color: rgba(0,0,0,.9);
				color: #fff;
				border-radius: 2px;
				padding: 5px;
				display: none;
			}
			#custom p {
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			#custom::before{
				content: '';
				position: absolute;
				width: 10px;
				height: 10px;
				top: 100%;
				left: 50%;
				background-color: rgba(0,0,0,.9);
				transform: translate(-50%, -5px) rotate(45deg);
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>1234565555555555555555577777777777777777777777777777777777777777777777
			777777777777777777777777777777777775555555555555555555555555555555555555555555</p>
			<div id="custom">
				<p></p>
			</div>
		</div>
		
		<script>
			const app = document.querySelector('#app')
			const myTitleBox = document.querySelector('#custom')
			const myTitle = document.querySelector('#custom p')
			app.addEventListener('mouseenter', function(){
				myTitle.innerText = app.innerText
				myTitleBox.style.display = 'block'
			})
			app.addEventListener('mouseleave', function(){
				myTitleBox.style.display = 'none'
			})
		</script>
	</body>
</html>

hp-future

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义标签title显示

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } #app{ width: 300px; margin: 200px auto; text-align: center; backgrou
复制链接

扫一扫