Invert Text Color on Mouse Hover

Invert text color on mouse hover

Here is an idea using clip-path. The trick is to duplicate the text to have two layers above each other with different text color then I reveal the top one using the clip-path that I adjust with the move of the mouse.

var h =document.querySelector('h1');var p= h.getBoundingClientRect();var c= document.querySelector('.cursor');
document.body.onmousemove = function(e) {  /*Adjust the cursor position*/  c.style.left=e.clientX+'px';  c.style.top=e.clientY+'px';  /*Adjust the clip-path*/  h.style.setProperty('--x',(e.clientX-p.top)+'px');  h.style.setProperty('--y',(e.clientY-p.left)+'px');}

body {  cursor:none;}h1 {  color: #000;  display:inline-block;  margin:50px;  text-align: center;  position:relative;}h1:before {  position:absolute;  content:attr(data-text);  color:#fff;  background:#000;  clip-path: circle(20px at var(--x,-100%) var(--y,-100%));}.cursor {  position:fixed;  width:40px;  height:40px;  background:#000;  border-radius:50%;  top:0;  left:0;  transform:translate(-50%,-50%);  z-index:-2;}

<h1 data-text="WORK">WORK</h1>
<span class="cursor"></span>

Invert text color to color of bg on hover

Live Demo

<a>MOVE YOUR CURSOR HERE!</a> 

<a>MOVE YOUR CURSOR HERE!</a>

Style

a:nth-child(1) {
    background-color: #FFF000;
    border: 2px solid #000FFF;
    color: #000FFF;
}
a:nth-child(2) {
    background-color: #0077CC;
    border: 2px solid #FF8833;
    color: #FF8833;
}
a:hover {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

this tool can generate inverted color pairs : TOOL

---

update(because of comments ):

Demo

I think there are no way to read anther element style using pure css

<a class="delete">Delete</a> 
<a class="create">Create</a>
<a class="black">Black</a>

style

.delete{
    background-color: #FFF;
    border: 2px solid #F00;
    color: #F00;    
}
.create{
    background-color: #FFF;
    border: 2px solid #0F0;
    color: #0F0;    
}
.black{
    background-color: #FFF;
    border: 2px solid #000;
    color: #000;    
}
.delete:hover{
    background-color: #F00;
    border: 2px solid #FFF;
    color: #FFF;   
}
.create:hover{
    background-color: #0F0;
    border: 2px solid #FFF;
    color: #FFF;    
}
.black:hover{
    background-color: #000;
    border: 2px solid #FFF;
    color: #FFF;    
}

Invert Button colors on hover using JavaScript & CSS

Try to set invert value to 1 instead of button

.invertedButton {
  filter: invert(1);
}

and try to use mouseenter instead mouseover because mouseover is triggered many times while mouseenter is triggered only once when cursor gets over button

invertLink.addEventListener('mouseover', toggleDark);

Solution using css only

.button:hover{
  filter: invert(1);
}

How can I invert the color black to make it visible during mouseover?

This isn't exactly what you asked for, since the text color isn't inverted...but the black still shows up against the red cursor element as it moves around. Pretty simple to do with z-index.

const cur = document.querySelector('#cur');
const { width, height } = cur.getBoundingClientRect();
document.addEventListener('mousemove', e => {
  cur.style.top = e.y - height / 2 + 'px';
  cur.style.left = e.x - width / 2 + 'px';
});

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: black;
}

#txt {
  position: relative;
  color: black;
  background-color: transparent;
  z-index: 300;
  font-size: 3rem;
  padding: 1rem;
}

#cur {
  position: absolute;
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
  background-color: red;
  z-index: 200;
}

<div id='txt'>FEELING LEFT IN THE DARK?</div>
<div id='cur'></div>

Invert colours with CSS on mouse over

Update:

You have an inline style defined in <i>. This is the root cause of all the problem:

<a href="#"><i class="fa fa-cloud fa-3x" style="color:#337ab7;"></i></a>
<!-- ------------------------------------^^^^^^^^^^^^^^^^^^^^^^

God, didn't see that. You need to give !important like:

.catbox:hover a i {
  background-color: #337ab7;
  color: #fff !important;
}

The use of !important is very much discouraged. So use:

.catbox a i {
  color: #337ab7;
}
.catbox:hover a i {
  background-color: #337ab7;
  color: #fff;
}

And change your HTML to completely remove the inline style:

<a href="#"><i class="fa fa-cloud fa-3x"></i></a>

---

For the links, you have to explicitly inherit. Add this line of CSS:

.catbox:hover a {
  background-color: inherit;
  color: inherit;
}

Or better, keep it like what you had before:

.catbox:hover,
.catbox:hover a {
  background-color: #337ab7;
  color: #fff;
}

Since <i> is inside <a>, it'll take the colour.

How to invert color of entire page when hovering on a link

You have to use Javascript to achieve what you want.
The idea is to apply a class with filter: invert(1); to the body element when the mouse is over (onmouseoover event) the link and remove it when the mouse leaves (onmouseleave event):

const invertLink = document.querySelector('#invert');const toggleDark = () => document.querySelector('body').classList.toggle('dark');invertLink.addEventListener('mouseover', toggleDark);invertLink.addEventListener('mouseleave', toggleDark);

.dark {  filter: invert(1);  background: black;}

<body>  <h1>Hello World</h1>  <a href="#" id="invert">Hover me!</a><br><br>  <img src="https://www.gravatar.com/avatar/"></body>

How to invert colors using CSS on hover

Your original background shorthand uses a gradient which is interpreted as a background-image and so your hover declaration does not override that property.

.ryanAddButton {  display: inline-block;  padding: 8px 0px;  width: 390px;  /*background:    -moz-linear-gradient(#000, #000);background:    -o-linear-gradient(#000, #000);background:    -webkit-linear-gradient(#000, #000);background:    linear-gradient(#000, #000);    */  background: black;  color: #fff;  font: normal 700 20px/1"Calibri", sans-serif;  text-align: center;  text-shadow: 1px 1px 0 #000;}.ryanAddButton:hover {  background-color: white;  color: black;}

<p class="ryanAddButton">Add to Cart</p>

How to easily invert text color based on the background color

Add this to the class .navbar-fixed-top in styles.css on line (1)

background-color: #0000004d;

The entire class should look like this:

.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    top: 0;
    background-color: #0000004d;
}

Hope I helped!

Invert navigation text and logo color from white to black/colored when scrolling depending on color of background?

One approach would be to create two classes, a light and dark class. Each of those contains CSS property (aka variable) for your colors. Then just use the scroll position to switch the classes as needed.

For the image, you can either switch the src attribute within that same code block, or use something like filter: invert(1); to modify it's colors.

For a subtle animation, you can also just use CSS: transition: all 0.25s ease;.

Here's a quick demo, (it's been about 10 years since I last used jQuery, so that part may have some room for improvement).

$(window).scroll(function(){
const pageHeight = $(window).height();
  if($(window).scrollTop() > pageHeight){
    $('body').addClass('dark').removeClass('light')
  }else{
    $('body').addClass('light').removeClass('dark')
  }
});

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  transition: all 0.25s ease;
}

body.light {
  --foreground: #000;
  --background: #fff;
}
body.dark {
  --foreground: #fff;
  --background: #000;
}

body.dark img.logo-image {
  filter: invert(1);
}

div.outer {
  width: 100%;
  min-height: 400vh;
}

nav.top-bar {
  top: 0;
  display: flex;
  width: 100%;
  background: var(--background);
  position: fixed;
  border-bottom: 1px solid var(--foreground);
}

img.logo-image {
  width: 6rem;
}

a.menu-link {
  margin: 0.5rem;
  padding: 0.25rem;
  color: var(--foreground);
  border: 1px solid var(--foreground);
}

div.content {
  height: 100vh;
  border-bottom: 1px dashed var(--foreground);
}

div.content p {
 padding-top: 4rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="light">
<div class="outer">
  <nav class="top-bar">
    <img class="logo-image" src="https://newhomespain.com/wp-content/uploads/2016/11/new-home-spain-hi-res-logo.png">
    <a class="menu-link">Home</a> 
    <a class="menu-link">Webshop</a> 
    <a class="menu-link">About</a> 
    <a class="menu-link">Contact</a> 
  </nav>

    <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Donec sed odio operae, eu vulputate felis rhoncus. Salutantibus vitae elit libero, a pharetra augue. Nihil hic munitissimus habendi senatus locus, nihil horum? A communi observantia non est recedendum.
    </p>
  </div>
  <div class="content">
    <p>
      Non equidem invideo, miror magis posuere velit aliquet. Quisque placerat facilisis egestas cillum dolore. Curabitur blandit tempus ardua ridiculus sed magna. Contra legem facit qui id facit quod lex prohibet. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
    </p>
  </div>
  <div class="content">
    <p>
      A communi observantia non est recedendum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
    </p>
  </div>
</div>

</body>

---

Related Topics