我想在拆分屏幕中添加一個工具提示。我嘗試很多這樣的組合一個,但他們都失敗了。我的工具提示始終隱藏在第二個“屏幕”后面到目前為止,這是我的代碼<!DOCTYPE html><style>a-leftcolumn { width: 8%; background: #EFF0F1; overflow-y: auto; overflow-x: scroll; position: absolute; top: 0px; left: 2px; bottom: 0px; padding-left: 3px; font-size: 10px;}a-main { width: 90%; overflow: auto; position: absolute; top: 0px; left: 9%; bottom: 0px;}/* tooltip https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden*/.has-tooltip { /*position: relative;*/ display: inline;}.tooltip-wrapper { position: absolute; visibility: hidden;}.has-tooltip:hover .tooltip-wrapper { visibility: visible; opacity: 0.7; /*top: 30px;*/ /*left: 50%;*/ /*margin-left: -76px;*/ /* z-index: 999; defined above with value of 5 */}.tooltip { display: block; position: relative; top: 2em; right: 30%; width: 140px; height: 96px; /*margin-left: -76px;*/ color: #FFFFFF; background: #000000; line-height: 96px; text-align: center; border-radius: 8px; box-shadow: 4px 3px 10px #800000;}.tooltip:after { content: ''; position: absolute; bottom: 100%; left: 50%; margin-left: -8px; width: 0; height: 0; border-bottom: 8px solid #000000; border-right: 8px solid transparent; border-left: 8px solid transparent;}/* end tooltip */</style><body><a-leftcolumn> <a class="has-tooltip" href="#">Hover me for Tooltip <span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a></a-leftcolumn><a-main> Some text</body></html>
html:工具提示在帶滾動的拆分屏幕上隱藏為div
大話西游666
2021-05-05 14:10:59