* { padding: 0; margin: 0; } #video-container { position: relative; width: 1660px; height: 850px; float: left; overflow-x: hidden; } .kSpan { color: rgba(120, 120, 120,0.66); font-size: 0.8rem; width: 330px; } .textEllipsis { white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏溢出内容 */ text-overflow: ellipsis; /* 显示省略号 */ } video { width: 94%; height: 85%; } .gudingBtn { width: 32px; height: 32px; /* border-radius: 16px; */ line-height: 27px; text-align: center; } .subtitles { position: absolute; bottom: 200px; width: 100%; text-align: center; color: white; background-color: rgba(0, 0, 0, 0.7); font-size: 18px; } #segmentsContainer:is(:hover) { right: 0px !important; } #segmentsContainer { transition: right 0.7s; z-index: 999; overflow-x: hidden; background-color: #e3e3e3c2; position: absolute; right: -300px; display: flex; flex-direction: column; width: 400px; height: 750px; gap: 10px; overflow-y: scroll; float: left; flex-wrap: nowrap; padding: 10px; align-content: flex-start; justify-content: flex-start; align-items: center; } .kBtn { width: 340px; height: 60px; font-size: 1.3rem; text-align: left; cursor: pointer; color: rgb(103, 194, 58); background-color: rgb(240, 249, 235); border: 1px solid rgb(179, 225, 157); } .knowTtileTheme { font-size: 1.3rem; cursor: pointer; color: rgb(103, 194, 58); } .kBtn:hover { background-color: rgb(248, 230, 191) !important; border: 1px solid rgb(206, 187, 81); } .knowDiv { } .knowQuestion { cursor: pointer; border: 2px solid #ff000059; border-radius: 10px; background-color: #cddc393d; } .knowDiv:hover .knowTtile { width: 340px; display: block; background-color: rgb(240, 249, 235); border: 1px solid rgb(179, 225, 157); } .knowTtile { position: absolute; text-align: left; display: none; }