I'm working on a code where I need to change the color of certain points when they overlap with a segment, and partially change their color when hovered over by a rectangle. I attempted to achieve this using mix-blend-mode but it didn't work as expected. My approach was to set a mix blend mode: difference for the black segment and isolation for the line. I also tried a similar thing with the dots.
.month-subsection-news {
height: 62vh;
//background-color: blue;
position: relative;
}
.month-name-news {
font-size: 36vh;
position: absolute;
height: 100px;
width: 100px;
top: 5vh;
//margin-top: ;
font-family: GothamMedium;
color: #ededed;
}
.line-timeline {
width: 100%;
position: absolute;
height: 0.1vh;
top: 54%;
z-index: 3;
background-color: black;
// mix-blend-mode: exclusion;
}
.arrow-left-timeline {
position: absolute;
//@at-root: 2vh;
//width: 2vh;
left: 10vh;
top: 47%;
//background-color:blue
}
.arrow-right-timeline {
position: absolute;
//height: 2vh;
// width: 2vh;
right: 10vh;
top: 47%;
//background-color:blue
}
.dots {
position: absolute;
height: 1vh;
width: 1vh;
//left: 20vh;
top: -0.5vh;
background-color: black;
z-index: 999;
border-radius: 100px;
}
... (remaining CSS code) ...
.hover-me:hover span {
display: block;
text-align: center;
clip-path: polygon(50% 0, 100% 41%, 100% 100%, 0 100%, 0 43%);
}
.black-segment {
height: 7vh;
width: 30vh;
position: absolute;
top: -1.5vh;
left: 80vh;
background-color: black;
}<div class="month-subsection-news">
<div class="line-timeline">
<div class="black-segment"></div>
<div class="dots dots1"></div>
<div class="dots dots2"></div>
<div class="dots dots3"></div>
<div class="dots dots4"></div>
<div class="dots dots5"> <a class="hover-me" href="#"> a<span >Hello, World!</span></a></div>
</div>View desired result https://i.sstatic.net/pu6Lm.png