1.需求
用原生js创建一个div层,并且鼠标移入的时候才显示(类似于tooltip的功能~)
var el = document.createElement('div'); // 创建一个div
el.className = 'baseline'; // 自定义类名
el.style.left = '100px'; // 行内样式
// tooltip:鼠标移入才显示
var tooltipEl = document.createElement('div');
tooltipEl.className = 'baseline-hover';
tooltipEl.innerHTML = `<p>计划开始时间:2023-07-20</p>
<p>计划结束时间:2023-07-21</p>`
// 鼠标移入
el.onmouseover = function() {
el.style.cursor = 'pointer';
el.appendChild(tooltipEl)
}
// 鼠标移除
el.onmouseout = function () {
el.removeChild(tooltipEl)
}
2.遇到的问题:父类的opacity对子类产生了影响
问题:父元素设置了opacity:0.5, 即使设置子元素opacity:1,子元素的opacity还是1
解决方法:父元素采用 rgba
的形式代替 opacity
, 并且子元素加上定位 position:absolute/relative
即可