Change background colour when hovering a focused item

Question

I currently have this code:

    <li class="relative bg-white py-5 px-4 hover:bg-gray-50 focus-within:bg-blue-50/50 focus-within:ring-1 focus:bg-blue-50/50 focus-within:ring-inset focus-within:ring-blue-600">

Though when hovering a focused element, it will not change to a custom colour.

Is there a way to change to a custom background colour when hovering over a focused element?

Answer 1

Was focus-within:hover:bg-black that did the trick for me.

Answer 2

Try to use any of the below class

hover:bg-["#fffeee"]

Or

focus:hover:bg-["#fffeee"]

Answer 3

Answering your question, if there is. You can check this link it will solve your problem.

https://tailwindcss.com/docs/background-color#arbitrary-values

Your code would be as follows applying Arbitrary values

<li class="relative bg-white py-5 px-4 hover:bg-[#808080] focus-within:bg-blue-50/50 focus-within:ring-1 focus:bg-blue-50/50 focus-within:ring-inset focus-within:ring-blue-600"></li>

I hope it helps you.