Inverting the colors of the image and changing the background color

I have a blend of blue and white image with a white background. When the div is clicked, I want to switch the colors around (background to blue and blue part of the image to white, white part to blue).

Html :

<div class="col" ng-click="onHomeButtonClick()">
                        <img src="images/iconHome.png" class="menu-icons"><br>
                        </div>

Js code :

this.onHomeButtonClick = function($event){
        $event.target.style.backgroundColor="DarkSlateBlue";
        }

Tried so far :

By using

$event.target.style.backgroundColor="DarkSlateBlue";
I am only able to change the background color. How can I reverse the colors as desired?

Answer №1

Consider utilizing the following CSS declaration:

It could look something like this:

HTML:

<img src="images/iconHome.png" id="imageToInvert" class="menu-icons">

CSS:

#imageToInvert:hover {
    filter: invert(100%);
}

I hope you find this information helpful.

Answer №2

If you're looking to achieve the effect of filter:invert(100%), the best approach would be to create a separate class with that style. For example, you could define a class called .filterClass{filter: invert(100%)} and then simply add this class to your element within the click event by using element.className += "filterClass";

Answer №3

Here's a helpful tip for you: if you want to change the background color of a div, you can use the same technique to also change the image color. Feel free to check out this Fiddle for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for updating a table following a successful Post request utilizing $evalAsync

I am facing an issue with updating my table after a successful Post without having to reload the page. Interestingly, I have it working perfectly for a successful Put request but seem to be struggling to make it work with the Post request. Works //Update ...

Oops, encountering a blank page error while trying to serve the application using gulp

vendor-bed50f88.js:31 Uncaught Error: [$injector:modulerr] Issue with initializing module angularMaterialAdmin: Error: [$injector:nomod] Module 'angularMaterialAdmin' cannot be found! Please check if the module name is correct and it ha ...

Revamp the website to create a more streamlined and compact version that mirrors the functionality of the desktop website

My goal is to make my website responsive on all mobile devices. I want the mobile version to look exactly like the desktop version, just smaller in size. I attempted using transform but it didn't have the desired effect. I aim to achieve the same con ...

Does vuetify offer a card footer or card deck feature in its designs?

I'm trying to achieve a layout similar to this: https://getbootstrap.com/docs/4.0/components/card/#card-groups https://i.sstatic.net/HxKEh.png The goal is to keep the height of the box consistent even when the description varies Here's my code ...

What exactly does the ::before pseudo-element accomplish?

After reviewing the documentation, I believe I have a good grasp of the purpose of ::before and ::after. It seems that they are typically used in conjunction with other elements. However, the webpage I am examining contains the following code: <body> ...

"Creating a custom navigation bar with full width and navigation corners on both left

I am struggling to make my website's navbar stretch to the edges of the container while maintaining full width. I have added left and right padding to each navigation item, but in smaller laptop resolutions, the items break onto a new line, which is n ...

JavaScript code for opening and closing buttons

I created a button that successfully opens, but I am struggling to figure out how to close it. Can someone assist me with this? Additionally, I have one more query: How can I remove the border when the button is clicked? document.getElementById("arrowb ...

Display a span element using jQuery datatable to indicate that the update operation was

I have implemented inline editing using jQuery Datatables. Currently, I am trying to display a green checkmark when a record gets updated. Below is the ajax call that populates the table: $.ajax({ url: 'api/massEditorSummary.php', type: &ap ...

How can I remove the color of a button in jquery after it's been clicked?

<button style="background-color:lightblue" id="extractv"> <b> Extract<br>v </b> </button> ... $("#extractv").click(function () { $("#extractv").removeAttr("style"); }); Upon clicking the button, my ...

CSS Tips: Defining Pseudo-Element Sizes

Currently, I am trying to adjust the width of the :before pseudo-element in order to match it with the dimensions of the element itself, specifically an anchor tag. This is part of my goal to create an overlay that completely covers the entire element. As ...

Copy the style of a chosen element and apply it to another element

One of the challenges I'm facing involves a dynamic span element that changes based on color selection: <span class="color checked" style="background-color: #ff0000">Red</span> In addition, I have an image element wit ...

Is it possible to condense my angular-ui-router stateProvider definition?

While Angular-UI-Router is a great tool, I find that my code for defining the stateProvider is getting repetitive. For example: .state('home', { url: "/home", templateUrl: "home.html" }) .state('products', { url: "/products", t ...

What is the reason border-box does not function properly on inline-block elements?

Demo: http://jsfiddle.net/L5jchnpm/ I've encountered an issue where I believed that using display: inline-block would make elements act as both inline and block elements. Additionally, I thought that setting box-sizing: border-box would adjust the w ...

Highlighting a row upon being clicked

How can I implement a feature in my HTML page that highlights a row when selected by changing the row color to #DFDFDF? If another row is selected, I would like the previously selected row to return to its original color and the newly selected row to be h ...

What is the best method for customizing the color of angularjs spinners?

As I delve into developing an AngularJS application, my focus has been on seamlessly integrating an AngularJS spinner. Taking it a step further, I managed to tailor some of the spin-kit CSS properties to customize the appearance and behavior of the spinn ...

What is the process for modifying a Joomla plugin?

Just starting out with Joomla development and recently installed Joomla 2.5 on my local computer for some practice. I have a question about editing Joomla plugins - specifically the layout of the Content - Pagebreak plugin (the pagination that appears wh ...

What is the best way to organize and position numerous images and text elements within a flex container?

Currently learning the ropes of web development and working on a practice project. My goal is to utilize flexbox in order to achieve a layout similar to this design. Here's what I have so far: .flex-container { display: flex; align-items: cente ...

A div element with a set width that contains an inline child element

I recently created a basic HTML document with two elements: a div with a fixed width, and an image placed after it. According to my understanding, images are inline elements, so I expected the image to appear next to the div on the right side since there ...

Semantic UI (React): Transforming vertical menu into horizontal layout for mobile responsiveness

I have implemented a vertical menu using Semantic UI React. Here is the structure of my menu: <Grid> <Grid.Column mobile={16} tablet={5} computer={5}> <div className='ui secondary pointing menu vertical compact inherit&apos ...

Tips for embedding Jquery code within Vuejs applications

Trying to code a Vue.js Navbar that changes color when scrolling using Jquery and CSS script. It works, but I encountered an error with Vue.js not supporting the syntax '$' after page refresh, resulting in a "$ not defined" error message. As a ne ...