is there a way to write hover code inside style="" attribute in HTML?

Question

is there a way like this in html?

<div style="&:hover{@apply class class class;}"></div>

I asked a while ago about the tailwind CSS prefixes are repetitive at some point TailwindCSS - is there a way to not write multiple times the same prefix? like `hover:` for example

hover:class hover:class hover:class hover:class hover:class hover:class

focus:class focus:class focus:class focus:class focus:class focus:class

sm:class sm:class sm:class sm:class sm:class sm:class

and someone with experience creates a simple script/library for solving my problem! and is working fine

hover:

<div data-hover="my-class my-class my-class my-class" class="my-class my-class my-class">

focus:

<div data-focus="my-class my-class my-class my-class" class="my-class my-class my-class">

sm:

<div data-sm="my-class my-class my-class my-class" class="my-class my-class my-class">

or all 3 in one:

<div 
  data-sm="my-class my-class" 
  data-hover="my-class my-class" 
  data-focus="my-class my-class"
  data-md="my-class my-class"
  class="my-class my-class my-class"
></div>

but someone after I accepted the answer, tell me that the accepted answer it's wrong because it contains javascript.

so I tell him "how to do it?"

and tell me to use @apply

@apply is good, but the problems are that:

<style>
  .my-named-button:hover {
     @apply bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-40 text-white;
  }
</style>

I need to start naming my components which I don't want.
I can't write all the CSS logic directly on my <div>
I need always to open the CSS file to see if there are some external styles, while with tailwind there is no hidden style (everything is visible on the component)
basically, the problems that tailwind solves now not become solved but are harder to maintain.

the problem

so it's there a way to do like this

<div style="&:hover{@apply class class class;}"></div>

from what I know there are some libraries (SCSS or SASS) that use & like this in javascript

and with & I don't need to worry about naming components.
another problem is adding :hover inside style="" attribute
@apply inside selector so tailwind works without JS
all the style are visible to me in HTML without having a CSS file.

this concept is good in some frameworks like svelte which you do button {} without even naming with class.

but I am using only HTML, JS vanilla, no framework.

if isn't possible, it is preferable the script solution for you?
or I need to reinvent the wheel
as he tells me the guy on the StackOverflow question
with using @apply,
where is much simplier with js script I have data-hover="", data-focus="", data-sm="", data-md="".

is there a way to write hover code inside style="" attribute in HTML?

the problem

0 Answers0