I want to add a hover affect

Question

I don't know if it possible because of html positioning but I want to have when I hover over child 2, I can affect child 1

The HTML

<div class="scroller-1Bvpku none-2Eo-qx scrollerBase-289Jih" dir="ltr" style="overflow: hidden scroll; padding-right: 0px;">
    <div class="powerclock">11:51 </div>
<div class="tutorialContainer-2sGCg9"> </div>
</div>

But i want it if i hover over "tutorialContainer-2sGCg9" I can move "powerclock". Doesnt matter if its sass or css

score 0 · Answer 1 · answered Mar 27 '21 at 07:05

I think you should use javascript. Here is the full code;

document.getElementById("second").onmouseover = () => {
  document.getElementById("first").style.color = 'orange';
}

document.getElementById("second").onmouseout = () => {
  document.getElementById("first").style.color = 'black';
}

<div class="scroller-1Bvpku none-2Eo-qx scrollerBase-289Jih" dir="ltr" style="overflow: hidden scroll; padding-right: 0px;">
    <div class="powerclock" id="first">11:51 </div>
<div class="tutorialContainer-2sGCg9" id="second">Other div </div>
</div>

Here i am first getting the element which has id = second which is the second child and i am using the method onmouseover on it i.e, if we hover over it, then after that if we hover, i am simply changing the color of the first element just as an example. You can do whatever you want.

score 0 · Answer 2 · answered Mar 27 '21 at 07:15

CSS doesn't have a way that you can select the sibling before which is what you'd need if you want exactly the effect you have described.

However, if changing the HTML or adding Javascript (which isn't a tag included in your question so I assume this isn't possible) aren't options you can get a very similar effect to the one you describe, and the user might well not notice [that hovering on the time also moves it - hovering isn't all that accurate!]

What we do is sense the hover on the parent div but move only the time div:

.scroller-1Bvpku.none-2Eo-qx.scrollerBase-289Jih:hover div.powerclock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: scale(2);
  z-index: 2;
  background: cyan;
}

<div class="scroller-1Bvpku none-2Eo-qx scrollerBase-289Jih" dir="ltr" style="overflow: hidden scroll; padding-right: 0px;">
    <div class="powerclock">11:51 </div>
<div class="tutorialContainer-2sGCg9"> tutorial container</div>
</div>

score 0 · Answer 3 · answered Mar 27 '21 at 07:22

.powerclock {
  cursor:pointer;
    font-weight : bold;
  font-size: 24px;
  font-family : sans-serif;
  color: purple;
}

.powerclock:hover {
  color : red;
  transition: 0.3s all;
}

<div class="scroller-1Bvpku none-2Eo-qx scrollerBase-289Jih" dir="ltr" style="overflow: hidden scroll; padding-right: 0px;">
    <div class="powerclock">11:51 </div>
<div class="tutorialContainer-2sGCg9"> </div>
</div>

You can use this to get an hover effect

I want to add a hover affect

3 Answers3