Change font after text to a div?

Asked

Viewed 2,803 times

0

I have a div that has position: fixed, that is, accompanies the scroll. But I have a problem. Since the div has text with a color, if pass over a div darker, the text will not be visible. Is there any way to apply in css or js for when he came to this div change to another color?

This is the code I have:

<div style="position:fixed;right:10px;top: 50%;transform: translateY(-50%);"><i class="fa fa-chevron-right fa-5x"></i></div>

I know I shouldn’t use style on line but as it is only as testing phase, I am doing so for the easiest code manipulation.

I’ve heard of the method mix-blend-mode but I couldn’t put it into practice. How could I use that method?

css

  • One way to do this is to calculate the scrollTop of the window/body and the scrollTop static text. and check if it is in the scroll you want, if you apply css.

  • Read this here and see if it helps: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

  • Only a z-index to play this fixed div over all the content wouldn’t solve your problem? It has some background color, or just the text?

  • @hugocsl I have a div darker with a dark background. The supposed div stuck to the scroll is that indicated in the code

  • Guy is kind of hard to understand, if you can put the full code of HTML and CSS will get easier to give you an accurate answer.

  • @hugocsl https://jsfiddle.net/dagncLy4/ See how the background disappears because it is white and changes to the dark appears? That’s more or less what I want but without the circular background, I want you to change the text if you go over the black div

Show 1 more comment

1 answer

-2

Use :Hover as an example below:

HTML

<html>
  <head>
    <title>Exemplo alteração de cor do texto</title>
  </head>
  <body>
    <div class="divMain">Seu texto aqui</div>
    Conteudo do site
  </body>
</html>

CSS

.divMain {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: black;
}

.divMain:hover {
  color: red;
}

You can see in https://jsfiddle.net/mytq5y68/

  • Dude he doesn’t want the effect on :Hover, he wants it in the browser scroll event!

  • This is not what I wanted, not to have the effect of when he passes the mouse on the div, but when she touches another div

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.