Tips for incorporating Tailwind classes: Once the group is activated, modify the "after" element by applying the classes opacity-100 and scale-

<Link
    key={tag.id}
    replace={true}
    href={{
        query: createQueryString("tags", tag.id.toString())
    }}
    className="group relative inline-flex -m-2 p-2"
>
    <div className="absolute inset-0 z-10"></div>
    <Checkbox
        value={tag.id.toString()}
        isSelected={tagsQuery?.includes(tag.id.toString())}
        radius={"sm"}
        style={{position: "relative", backgroundColor: "transparent"}}
        classNames={{
            icon: "group-active:opacity-100 after:group-active:scale-100 after:group-active:opacity-100"
        }}
        className={"text-body font-body"}
    />
</Link>

Even with trying to change the order like putting group-active:after, it still does not work for me. Hopefully, I can come up with a solution to resolve this issue.

htmlcsstailwind-cssnext.js13nextui

Answer №1

To create a specific effect, you can utilize JavaScript to manually switch between classes within your code. By incorporating the useState hook in your component, you can control the active state and modify it based on user actions such as mouse enter and leave events.

import { useState } from 'react';

const YourComponent = () => {
  const [isActive, setIsActive] = useState(false);

  return (
    <Link
      href={{
        query: generateQueryString("categories", category.id.toString())
      }}
      key={category.id}
      replace={true}
      className="group relative inline-flex -m-2 p-2"
      onMouseEnter={() => setIsActive(true)}
      onMouseLeave={() => setIsActive(false)}
    >
      <div className="absolute inset-0 z-10"></div>
      <Checkbox
        isSelected={categoriesQuery?.includes(category.id.toString())}
        value={category.id.toString()}
        radius={"sm"}
        className={`text-body font-body ${
          isActive ? "opacity-100 scale-100" : ""
        }`}
        style={{ position: "relative", backgroundColor: "transparent" }}
      />
    </Link>
  );
};

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

What could be causing the show() method to malfunction in jQuery?

My attempt at creating a basic slideshow using jQuery involves only 3 images in rotation. To navigate between images, I have utilized the next() method in my code. Here is how it is meant to function: Upon clicking a link (class="next"), a funct ...

javascripthtmljquerysliderslideshow

What's the reason for my badge being an oval shape?

I am attempting to design a badge that hovers above my cart icon and shows the total number of items currently in the cart. However, I have encountered an issue where the badge appears as an oval shape rather than a perfect circle. Can anyone assist with ...

cssreactjs

Bootstrap dropdown menu hidden behind other elements

I am implementing Ng-bootstrap in an Angular 5 project to create a dropdown in the navigation header. While I have managed to make it work, the dropdown appears behind the other elements in my container. I would like it to be displayed in front. Here is h ...

htmlangularsassng-bootstrap

Aligning text vertically in Bootstrap

Seeking assistance on how to vertically center text within a responsive grid. Can anyone provide guidance? <div class="col-md-4"> <h1>YOU WON'T BE ABLE TO</h1> </div> ...

htmlcsstwitter-bootstrap-3

Please indicate the value of the JQuery class

How can I display the value of the selected button? All buttons have the class "nummer" and their values should appear on the display. Is there a better approach to achieve this? JQUERY $(document).ready(function() { $(".nummer").click(function() { ...

jqueryhtml

What causes the double click on the button?

<div class="btn-group btn-group-toggle button-div" data-toggle="buttons"> <label class="btn btn-secondary" onclick="alert('option1');"> <input type="radio" name="op ...

htmlbootstrap-5

Developing a vanilla JavaScript web component with distinct HTML and JavaScript files

As I delve into creating vanilla JS web-components, I am exploring methods to keep the template HTML separate from the JS file, ideally in a distinct HTML file. I have examined various implementations of native JS web-component setups found notably here, ...

javascripthtmlweb-componentnative-web-component

Can JavaScript be Utilized to Create Dynamic Layouts Successfully?

Are you curious about the viability of using Javascript to create fluid website layouts? While it is possible, how does it compare in terms of performance and complexity when compared to other methods like CSS3/HTML5? Take a look at the function below that ...

javascripthtmlcss

jQuery preventing form submission after returning false

There's a small issue that I need help with. After submitting the form and receiving a false response, it prevents resubmission. For example, if a user forgets to input their name, they will see an error message asking them to do so. However, the u ...

phpjqueryhtmlajax

utilizing an ajax request to clear the contents of the div

When I click on Link1 Button, I want to use ajax to empty the contents in the products_list div <button type="w3-button">Link1</button> I need help with creating an ajax call that will clear the products in the product_list when the link1 but ...

javascriptphpjqueryhtmlajax

Utilizing the power of JavaScript, CSS, and HTML to seamlessly transfer selected items from one webpage to the shopping cart displayed on another page

Due to limitations on using back-end code, I'm seeking advice on how to implement this function. Most tutorials I've come across show the items and shopping cart on the same page. I've heard suggestions about using Jquery.load(), but I&apos ...

javascriptjqueryhtmlcssajax

Conditional formatting for form field styles

Is there a way in Angular to conditionally render a material style? For instance, I am looking to apply the following style only to my Password form field text, and only when both input boxes have content: .mat-form-field-appearance-outline .mat-form-fiel ...

cssangularangular-material

Issue with plotted point labels failing to display correctly on X Range Chart for the initial date of each month - Highcharts

Currently, I am implementing a chart that displays the timeline of activities using an x range. However, I have encountered an issue with the popup displaying data information when hovering over the bars. The problem arises specifically on the first date ...

javascriptc#cssasp.nethighcharts

Methods for incorporating rtl functionality into Angular Chosen

I am currently using Angular with Chosen (source) and I am attempting to implement right-to-left (RTL) support. Here is my demo, but despite referencing resources, I am encountering issues. The main problem arises when the body element has a dir="rtl" att ...

htmlcssangularjsjquery-chosenangular-chosen

"Enhance your website with Wordpress and Divi by adding dynamic image replacement on hover

In search of a code to insert into my project Utilizing images to create a large interactive button I'm currently using the divi code module within WordPress. I am seeking the ability to have an image switch with another image when hovering over it, ...

javascriptjqueryhtmlcsswordpress

Steps to make a sub Post or page on WordPress

Seeking to add sub posts within my website's main posts. The URL structure for the main post will be: site.com/post-title I envision sub posts following this format: site.com/post-title/subpost1 site.com/post-title/subpost2 site.com/post-title/ ...

phphtmlwordpress

Surprise scrolling on a mobile device's screen

I am trying to figure out why there is a horizontal scroll bar on the page. I would like the content to fill the entire screen. https://i.sstatic.net/Y0ToM.png <section class="who" data-aos="fade-in"> <img class=" ...

htmlcssbootstrap-4

Footer mysteriously collapses despite being set to a fixed size + odd performance

I've been working on a web page that features a fixed Navigation bar and Footer for logging information. Both the content and the footer are designed to scroll if needed. Thanks to some experimentation and the valuable input from those who responded t ...

cssbootstrap-4

Having trouble with changing the color of an element when the radio input is checked?

Can someone help me troubleshoot this HTML and CSS code? <label class="radio"> <input type="radio" name="plan" value="plan" required> <span> <h6>Plan</h6> <i class="pe-7s-graph1 ...

htmlcss

Tips for securely storing visitor-entered form data on our computer from our webpage

Is there a way to store the information filled out by visitors on our website? <ul class="form"> <li class="short"> <label>First Name<span class="required"></span></ ...

htmlcss