How create a Shortcode with hover and complex options

I am wondering how do you do when you have to create a shortcode with multiple hover or complex options ( gradient, boxshadow etc, thing that can't be inline ). How do you generate the css.

I don't want to generate a style/style block because for a simple shortcode used 10 times in the page would generate 10 blocks.

All the shortcode are set from the page, by the user, so are created when the_content() is called.

I want to give the user the possibility to edit and custom the shortcode for exmample let the user choose what border-radius to use when button is hovered etc.

Looking for an option that would validate as html5 and in WC3.

Adding an ID to each shortcode and generate custom css is what I am looking to do but I can't find a way to do this properly ( without creating style/style block everywhere )

Any advice and examples are welcome.

Thanks in advance!

Topic shortcode php css html Wordpress

Category Web

1
answered at

Gradient and boxshadow are fine to put inline. Your trouble will be with the hover states. Luckily there is a trick. You can put the hover styles in an outer element and force inherit on hover. Like this:

<div class="myshortcode">
<a style="color:blue;"><span style="color:red;">Content</span></a>
</div>

In your style.css you add this generic line with a transition effect as bonus:

.myshortcode a span {transition:color 1s;}
.myshortcode a:hover span {color:inherit !important;}

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.