How can one change the color of movable tiles to red while keeping the rest of the tiles in their original state in a puzzle game?

In this section of our code, the function moveTile is responsible for moving a tile. How can I modify it so that the hover color changes to red?

function moveTile(identity) {
var emptyId = findEmptySpace();
if (isEmptyNeighbor(identity)) {
    document.getElementById(identity).id = emptyId;
    document.getElementById(emptyId).onmouseover = function () {
        document.getElementById(emptyId).style.backgroundColor = "red";
    };
    document.getElementById(emptyId).onclick = (function (identity) {
        return function () {
            moveTile(identity);
        };
    }(emptyId));
}

}

Answer №1

To make the specific tile stand out, simply assign a class to it temporarily. We can name this class highlighted

To define this class, use the following code snippet:

.highlighted:hover {
   background-color: yellow;
 }

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

Methods for organizing consecutive elements within an array in Javascript/Typescript

Let's explore this collection of objects: [ { key1: "AAA", key2: "BBB" }, { key1: "BBB", key2: "CCC" }, { key1: "CCC", key2: "DD ...

What is the best way to add a background to certain elements?

Is there a simple and elegant way to swap the background of the circle with the background of the div underneath? I would like the circles to have the background image of div "one", while keeping div "one" invisible (not using visibility:hidden). I am lo ...

Is it possible for me to create a hyperlink that directs to a javascript function?

Here is the code I am currently using: <input class="button" type="button" value="Mark" onClick="doCheck('mark');" \> However, I would like to replace the button with a hyperlink using the <a> tag. Is it possible to achieve ...

Customizing the input field to have a width of 100%

Could someone provide a solution, like a link or working example, for creating input fields with rounded corners that have a width of 100% and a customizable right border? Here is the current structure I am using: <span class="rounded left-corner" ...

Adding an object to an ArrayList: A step-by-step guide

I'm encountering issues with adding objects to the list. I have a list of floors, each floor containing rooms. I can successfully add a floor, but I'm unsure how to add rooms to the floor list. I've attempted to access floor[index] or id, b ...

The role of form actions in Angular

I'm currently setting up a login feature using angular.js and devise. Below is the code for my form: <form ng-submit="submitLogin(loginForm)" role="form" ng-init="loginForm = {}"> <div class="form-group"> <label for="email ...

The MatTableDataSource provides a promise that includes approximately 7000 rows of data

When attempting to load a large amount of data into a MatTableDataSource, I am facing an issue. I would like to display a loader until the data is fully set, but I am unsure of when that happens. I attempted to use a promise like this: return new Promise(r ...

How to Update Font in Android Studio WebView

I am facing an issue with HTML: I am trying to implement a custom font in a webview but the font does not change when using this code: public void loadHTLMContentText(String text, WebView view) { String body; String head = "<head><style ...

Using jQuery Flot to set a target value and visually indicate its position on the graph

I'm currently using the jquery flot plugin to create graphs. My goal is to mark a specific value on the graph by plotting a horizontal line and displaying its exact value. I have already used markings to draw the line, but I am struggling to figure ou ...

Issues with Firefox's flexbox functionality are preventing it from working

Hey there, I've created a bubble menu with a button using code. It functions perfectly on Chrome but seems to have some issues on Mozilla Firefox. You can check it out and give it a try. $(".roundedBallOuter").click(function(e) { $(this).toggleCl ...

The alternative text for the oversized image exceeds the boundaries

After setting the width and height for an image, along with testing overflow:hidden, I've encountered an issue where the alt text for a broken image overflows the bounds of the image and the image size is lost. How can I contain the alt text within th ...

Programmatically show/hide legend items in amCharts 4

The project includes a Line chart with a legend that are initialized in separate containers. Both components are created using a createFromConfig method. <div ref="chartdiv" /> <div ref="legenddiv" /> My goal is to store to ...

Encountering a permission error when attempting to upload a file to the public folder on Vercel

Whenever I attempt to upload a file to the public folder on Vercel, I encounter the following error. ⨯ [Error: EROFS: read-only file system, open '/var/task/public/bb17ad93-017f-4fdf-a2db-713d9a390143.webp'] { errno: -30, code: 'EROFS& ...

Calculation operations nested within each other

Looking for a solution here. I am trying to utilize the CSS calc operation to carry out two calculations: I aim to make my width equal to (100% / 7) - 2 But whenever I attempt multiple operations in a CSS calc function, it doesn't work: width: cal ...

Incorporate query strings into every hyperlink within the application

Let me paint you a picture... I've got this lovely Next.js app that's been around for a while, filled with lines of code we've poured our hearts into. Recently, we decided to spice things up by running some ads and now we are itching to see ...

Focus on input using jQuery (fixed focus)

How can I ensure that my input always has value and the focus remains fixed on it until values are typed, preventing the cursor from escaping the input field? While I know the existence of the focus() function, how can I effectively utilize it as an event ...

Exclude previous dates from the front end of ACF date picker

I am using Advanced Custom Fields to post job ads, and I have incorporated a date picker field for the end date of each job ad. <?php if (have_rows('jobs', 'option')): ?> <?php $now = time(); ?> <div i ...

What is the best way to reveal the square's id value upon hovering over it exclusively?

In this assignment, I am refraining from using HTML and focusing on JavaScript to create functionality. Here's my progress so far: document.addEventListener("DOMContentLoaded", function () { let button = document.createElement('button' ...

Reordering Divs in Bootstrap 3 Specifically for Small Screens

Just getting started with my first responsive design project, and I'm wondering if it's possible to achieve something like this using Bootstrap 3. The goal is to switch from the current layout: https://i.stack.imgur.com/lABXp.jpg To https://i. ...

Problem with Angular: ng-show not constantly re-evaluating expression

Utilizing a variable named activeScope to manage the state and toggle between two forms. This variable updates its value when a tab is clicked, triggering changeScope. While the change in active states for the tab buttons registers correctly, the divs for ...