When I hover over a particular color, I want the button to show up. However, instead of displaying the button only for that color, it appears for all the colors of the product. Also, the placement of the button on the left side means that if I try to hover to the left, the button disappears. The problem can be seen below:
[![enter image description here][1]][1]
If you're looking for a simple solution, consider utilizing the :hover css selector.
In your JavaScript file, add a class to your element
<div className="color-choice" key={i}>
Implement the :hover selector in your CSS file
.color-choice:hover button { display: block; }
.color-choice button { display: none; }
To achieve the desired effect, manipulating indexes of elements is crucial.
Rather than simply displaying content, it's necessary to determine the indexes of the element being hovered over:
const [displayIndex, setDisplayIndex] = useState({
typeIndex: -1,
colorIndex: -1
});
The event functions may be structured as follows:
const showButton = (typeIndex, colorIndex) => {
// e.preventDefault();
setDisplayIndex({
typeIndex,
colorIndex
});
};
const hideButton = () => {
// e.preventDefault();
setDisplayIndex({
typeIndex: -1,
colorIndex: -1
});
};
In order to conditionally render the button based on the displayIndex:
{
displayIndex.typeIndex === index
&&
displayIndex.colorIndex === i
&&
(<Button ....>Add</Button>)
}
If you implement these changes in your sandbox environment at https://codesandbox.io/s/add-to-cart-sampled-2-forked-9oi1kn?file=/src/App.js, you may need to adjust some styling aspects.
I trust you will find this information valuable.
Two php files and a js file are involved in this scenario. The issue at hand is that when the div is clicked, it navigates to a new page with an appended # to the URL, causing it to scroll to the specified comment ID. However, instead of scrolling to the c ...
Check out the jsFiddle link. The issue arises when the Result screen is set to the width of a mobile's screen. Instead of wrapping the text, it gets replaced by dots and cannot be scrolled to view the full content. Here is the code snippet: <a hr ...
During the installation of Bootstrap 5, I encountered an issue where many of my buttons are displaying a black font instead of the expected white font as shown in the Bootstrap 5 Documentation For instance, the .btn-primary button on the official Bootstra ...
I am currently contemplating the idea of utilizing fabric.js for an online handwriting recognition system. In order to make this system work, I need to transmit the sketched lines as a collection of lines, where each line consists of several points. If a ...
I have successfully implemented functionality using JavaScript to dynamically add new rows to a table. However, I am facing a challenge in accessing the data from these dynamically created rows in PHP for database insertion. Below, you will find the HTML ...
I am facing alignment issues with an image and a container placed next to each other. The rest of my website uses inline-block without any problems. If someone could provide guidance on how to resolve this, it would be greatly appreciated. Below is the s ...
I am working on a feature where a dynamically generated list has radio buttons displayed next to it. The goal is to show a dropdown list next to the specific radio button and list item that was changed. Essentially, if the radio button is set to "yes," I w ...
I am attempting to incorporate a dynamic progress bar by utilizing Bootstrap's progressbar and creating a custom JavaScript file. The goal is to continuously adjust the width of the progress bar at regular intervals to give the appearance of a moving ...
Looking to modify the size and color of a clicked value on the DateCalender MUI. Below is an excerpt from my code: const Calendars = ({state}: {state: StateData;}) => { const CustomDateCalendar = styled(DateCalendar)` .MuiPickersCalendarHeader-root ...
Just starting out with angularjs and I have a scenario with jQuery. handleClick(); function handleClick() { var doubleClick = false; $('#text span.word').on('click', function() { var that = this; setTimeout(funct ...
I'm currently working on looping through an array to verify the existence of email, phone, and alternate phone in a database. My challenge lies in finding a suitable function or workaround in AngularJS that allows me to iterate through the array with ...
Trying to develop a shared React and Typescript library has been quite challenging. Configuring the project workspace to work on both the library and application simultaneously has proven to be more difficult than anticipated. project ├─ app │ ├ ...
My React project with TypeScript is causing some issues. In the main tsx file, the import React from 'react' line works fine. However, in my test file, I keep getting the TS1259 error. I suspect there might be a problem with my TS/Jest/Babel conf ...
Note: The integration of a react-native checkbox with formik is proving to be a challenge as I am unable to set the value of the formik form. Interestingly, when using InputFields with formic, it works seamlessly with the same code. Checkbox.js import Rea ...
As I work on theming my website, which utilizes Bootstrap, I am making adjustments to the Bootstrap variables. Some variables are defined against the :root element in a way that allows me to easily override them: :root { --bs-body-color: red; } Howeve ...
My initial plan was to log all the IDs of news in my database using console. However, when I executed the code, an error occurred as shown in this image. What is the best way to address and resolve this issue? https://i.stack.imgur.com/ci8G1.png ...
Creating a JavaScript function to locate an anchor in a page (specifically with, not an id) and then going through its parent elements until finding one that contains a specified class. The code below works perfectly in Firefox 3.0 but encounters issues wi ...
Recently, I began my journey of learning Javascript and decided to interact with my Django API through Ajax requests. To achieve this, I created a search bar that triggers the API call after a one-second delay following a keyup action. input.addEventListe ...
After creating a custom function called module.exports, const mongoose = require("mongoose"); const Loan = require("../models/loan_model"); function unpaidList() { Loan.aggregate([ { $group: { _id: "$ePaidunpaid", data: { $pus ...
Is there a way to have my navigation bar indicate the selected page by changing the text color and adding a black background, while making only the text inside the current page nav transparent? For example, you can see the effect here: sammarchant.co.uk/n ...