上海网站建设 app开发,做带后台的网站,电商网站域名规则,工业设计厂家我们在开发中经常遇到一种场景#xff0c;就是给元素加提示信息#xff0c;就是鼠标移入到盒子上面时#xff0c;会出现提示信息这一功能#xff0c;如果我们给盒子加了hover#xff0c;当鼠标移入到盒子上时#xff0c;让他往上移动5px#xff0c;即transform: transla…我们在开发中经常遇到一种场景就是给元素加提示信息就是鼠标移入到盒子上面时会出现提示信息这一功能如果我们给盒子加了hover当鼠标移入到盒子上时让他往上移动5px即transform: translateY(-5px), 同时还让提示信息展示出来此时受到transform的影响提示信息会被父盒子遮挡住。代码如下
templatediv classcontainerdivclassitemv-foritem in 30mouseentershowTooltipmouseleavehideTooltipdiv classtooltip/divspan{{ item }}/span/div/div
/templatestyle
.container {display: flex;flex-wrap: wrap;width: 1145px;margin: 0 auto;padding: 10px;
}
.item {position: relative;display: flex;justify-content: center;align-items: center;width: 120px;height: 120px;background-color: #eceff7;border-radius: 10px;margin: 10px;box-shadow: 0 3px 5px 2px rgba(0, 0, 0, 0.1);cursor: pointer;transition: all 0.5s ease;;
}.item .tooltip {display: none;width: 100px;height: 30px;background-color: #000;border-radius: 6px;position: absolute;bottom: -50px;z-index: 10;
}
.item .tooltip::after {position: absolute;left: 0;top: -25px;width: 0;height: 0;left: 50%;transform: translateX(-50%);border-left: 12px solid transparent;border-right: 12px solid transparent;border-top: 15px solid transparent;border-bottom: 15px solid #000;content: ;z-index: 20px;
}
.item:hover {transform: translateY(-5px);
}
.item:hover .tooltip {display: block;
}
/style我们可以看到我们给tooltip设置了z-index值为10但是黑色提示信息依然被挡住了原因时当hover时执行了transform, 会改变元素的层级 此时我们只需要给 .item:hover 加上一句 z-index: 1, 保证hover的时候层级比item更低就能解决这个问题。
templatediv classcontainerdivclassitemv-foritem in 30mouseentershowTooltipmouseleavehideTooltipdiv classtooltip/divspan{{ item }}/span/div/div
/template
style
.container {display: flex;flex-wrap: wrap;width: 1145px;margin: 0 auto;padding: 10px;
}
.item {position: relative;display: flex;justify-content: center;align-items: center;width: 120px;height: 120px;background-color: #eceff7;border-radius: 10px;margin: 10px;box-shadow: 0 3px 5px 2px rgba(0, 0, 0, 0.1);cursor: pointer;transition: all 0.5s ease;;
}.item .tooltip {display: none;width: 100px;height: 30px;background-color: #000;border-radius: 6px;position: absolute;bottom: -50px;z-index: 10;
}
.item .tooltip::after {position: absolute;left: 0;top: -25px;width: 0;height: 0;left: 50%;transform: translateX(-50%);border-left: 12px solid transparent;border-right: 12px solid transparent;border-top: 15px solid transparent;border-bottom: 15px solid #000;content: ;z-index: 20px;
}
.item:hover {z-index: 1; /* 保证hover的时候z-index层级更低 */transform: translateY(-5px);
}
.item:hover .tooltip {display: block;
}
/style此时我们再看效果
