html - Set element visibility on hover event of another element

Question

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>

question from:https://stackoverflow.com/questions/65601189/set-element-visibility-on-hover-event-of-another-element

Answer 1

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>