Can i disactivate framer motion whileHover when button is disabled?

Question

i have an item count component with 2 buttons, and i want to disable the whileHover when the buttons are disabled. its possible?

<div className="flex space-x-5">
        <motion.button
          whileHover={{ scale: 1.1 }}
          transition={{ type: "spring", stiffness: 100, duration: 0.2 }}
          onClick={decrement}
          className="bg-blue-600 px-4 rounded-lg enabled:hover:bg-blue-500 disabled:opacity-60 disabled:cursor-not-allowed text-white"
          disabled={!stock || count <= 1}
        >
          -
        </motion.button>
        <span>{count}</span>
        <motion.button
          whileHover={{ scale: 1.1 }}
          transition={{ type: "spring", stiffness: 100, duration: 0.2 }}
          onClick={increment}
          className="bg-blue-600 px-4 rounded-lg enabled:hover:bg-blue-500 disabled:opacity-60 disabled:cursor-not-allowed text-white"
          disabled={!stock}
        >
          +
        </motion.button>
</div>

Thanks.

I haven't found any solution

Answer 1

maybe you can try this

const isDisableDecrement = !stock || count <= 1
const isDisableIncrement = !stock
    
<div className="flex space-x-5">
        <motion.button
          whileHover={{ scale: isDisableDecrement ? 1 : 1.1 }}
          transition={{ type: "spring", stiffness: 100, duration: 0.2 }}
          onClick={decrement}
          className="bg-blue-600 px-4 rounded-lg enabled:hover:bg-blue-500 disabled:opacity-60 disabled:cursor-not-allowed text-white"
          disabled={isDisableDecrement}
        >
          -
        </motion.button>
        <span>{count}</span>
        <motion.button
          whileHover={{ scale: isDisableIncrement ? 1 : 1.1 }}
          transition={{ type: "spring", stiffness: 100, duration: 0.2 }}
          onClick={increment}
          className="bg-blue-600 px-4 rounded-lg enabled:hover:bg-blue-500 disabled:opacity-60 disabled:cursor-not-allowed text-white"
          disabled={isDisableIncrement}
        >
          +
        </motion.button>
</div>

There are better solutions than this, but you can try it out.