If you can modify your HTML, you can move <div class="event_bullet"> before <div class="event1Bubble"> and use the general sibling selector, ~, or the adjacent sibling selector, +.
<!-- Current code -->
<div class="event1">
<div class="event1Bubble">...</div>
<div class="event_bullet"></div>
...
</div>
<!-- Updated code -->
<div class="event1">
<div class="event_bullet"></div>
<div class="event1Bubble">...</div>
...
</div>
/* Current code */
.event_bullet:hover .event1bubble {
visibility: visible;
}
/* Updated code */
.event_bullet:hover ~ .event1bubble {
visibility: visible;
}
.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="event_bullet"></div>
<div class="event1Bubble">
<div class="eventTitle">Event occured</div>
</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>
there is no straight way in CSS to add effects to the parent when hovering over its child so you could use javascript instead
add this to your JS file and it should work
const event_bullet = document.getElementsByClassName("event_bullet")[0];
const event1bubble = document.getElementsByClassName("event1Bubble")[0];
event_bullet.addEventListener("mouseover", () => {
event1bubble.style.visibility = "visible";
});
event_bullet.addEventListener("mouseout", () => {
event1bubble.style.visibility = "hidden";
});
I’m putting a horizontal timeline together for a project I’m working on.
I’ve been customising a template to this end.
I want events on a given day to appear as a ‘bullet’ on the timeline at the appropriate place (event_bullet) and the info panel (event1bubble) for that event to become visible on mouseover of the bullet.
The cutdown code I’m working with is below.
The bullet is shown and the info panel is ‘visibility: hidden’ to start with, but on event_bullet:hover it does not become visible. 🙁
I was using ‘display: block’ and ‘display: none’ to start off with, but moved to visibility to see if i’d have more luck.
.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>
Try to add a forward fresh to refer to the class like this. .event_bullet:hover> .event1bubble { visibility: visible; }
Thanks @FahrerFeyton – should that have the > at the end of the hover? If not, it’s what i’ve already got right at the end of my styles. if so, tried that just now and it made no difference 🙁
@HereticMonkey thanks for the suggestion – tried with general sibling combinator ~ but still no action on hover.
No problem! Glad this helped.
