【发布时间】：2021-04-12 12:27:52
【问题描述】：
我正在为我正在进行的一个项目制定一个水平时间表。 为此，我一直在定制一个模板。 我希望给定日期的事件在时间轴上的适当位置 (event_bullet) 和信息面板 (event1bubble) 上显示为“项目符号”，以便在鼠标悬停时显示该事件。
我正在使用的缩减代码如下。 项目符号已显示并且信息面板从“可见性：隐藏”开始，但在 event_bullet:hover 上它不可见。 :(
我一开始使用的是“显示：块”和“显示：无”，但后来转移到可见性，看看我是否会有更多的运气。
.Timeline {
display: flex;
align-items: center;
height: 500px;
}
.event1 {
position: relative;
}
.event1Bubble {
visibility: hidden;
position: absolute;
background-color: rgba(158, 158, 158, 0.1);
width: 139px;
height: 60px;
top: -70px;
left: -15px;
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(158, 158, 158, 0.64);
}
.event1Bubble:after,
.event1Bubble:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
.event1Bubble:before {
bottom: -10px;
left: 13px;
border-top-color: rgba(222, 222, 222, 0.66);
border-width: 12px;
}
.event1Bubble:after {
bottom: -8px;
left: 13px;
border-top-color: #F6F6F6;
border-width: 12px;
}
.eventTime {
display: flex;
}
.eventTitle {
font-family: "Arial Black", Gadget, sans-serif;
color: #a71930;
font-size: 11px;
text-transform: uppercase;
display: flex;
flex: 1;
align-items: center;
margin-left: 12px;
margin-top: 5px;
}
.time {
position: absolute;
font-family: Arial, Helvetica, sans-serif;
width: 50px;
font-size: 8px;
margin-top: 5px;
margin-left: -5px;
color: #9E9E9E;
}
.event_bullet {
display: block;
content: url(https://www.pngfind.com/pngs/m/16-164808_bullet-point-png-circle-transparent-png.png);
width: 15px;
height: 15px;
}
.event_bullet:hover .event1bubble {
visibility: visible;
}<div class="Timeline">
<svg height="5" width="200">
<line x1="0" y1="0" x2="200" y2="0" style="stroke:#004165;stroke-width:5" />
</svg>
<div class="event1">
<div class="event1Bubble">
<div class="eventTitle">Event occured</div>
</div>
<div class="event_bullet"></div>
<div class="time">9:27 AM</div>
</div>
<svg height="5" width="600">
<line x1="0" y1="0" x2="600" y2="0" style="stroke:#223344;stroke-width:5" />
</svg>
<svg height="5" width="50">
<line x1="0" y1="0" x2="50" y2="0" style="stroke:#004165;stroke-width:5" />
</svg>
<svg height="5" width="50">
<line x1="0" y1="0" x2="50" y2="0" style="stroke:#004165;stroke-width:5" />
</svg>
<svg height="20" width="42">
<line x1="1" y1="0" x2="1" y2="20" style="stroke:#004165;stroke-width:2" />
<circle cx="11" cy="10" r="3" fill="#004165" />
<circle cx="21" cy="10" r="3" fill="#004165" />
<circle cx="31" cy="10" r="3" fill="#004165" />
<line x1="41" y1="0" x2="41" y2="20" style="stroke:#004165;stroke-width:2" />
</svg>
</div>【问题讨论】：
-
尝试添加一个forward fresh来引用这样的类。 .event_bullet:hover> .event1bubble { 可见性：可见； }
-
谢谢@FahrerFeyton - 悬停结束时应该有 > 吗？如果没有，这就是我在我的风格结束时已经得到的。如果是这样，刚才试过了，没有任何区别:(
-
.event_bullet不是.event1bubble的祖先；它是一个兄弟，所以使用兄弟组合~。.event_bullet:hover ~ .event1bubble. -
@HereticMonkey 感谢您的建议 - 尝试使用一般兄弟组合器〜但仍然没有悬停操作。
标签： html css visibility timeline