Wie erstelle ich einen Shortcode mit Hover und komplexen Optionen

Ich frage mich, wie Sie tun, wenn Sie einen Shortcode mit mehreren Hover oder komplexen Optionen erstellen müssen (Farbverlauf, Boxshadow usw., was nicht inline sein kann). Wie generieren Sie das CSS?

Ich möchte keinen -Block generieren, weil für einen einfachen 10 mal verwendeten Shortcode 10 Blöcke generiert würden.

Alle Shortcodes werden vom Benutzer auf der Seite festgelegt und werden beim Aufruf von the_content () erstellt.

Ich möchte dem Benutzer die Möglichkeit geben, den Kurzwahlcode zu bearbeiten und anzupassen, zum Beispiel, ob der Benutzer auswählen soll, welcher Rand-Radius verwendet werden soll, wenn die Taste gedrückt wird usw.

Suchen Sie nach einer Option, die als html5 und in WC3 validiert wird.

Jedem Shortcode eine ID hinzuzufügen und benutzerdefinierte CSS zu generieren, ist das, was ich tun möchte, aber ich finde keine Möglichkeit, dies richtig zu tun (ohne überall zu erstellen).

Jeder Rat und Beispiele sind willkommen.

Danke im Voraus!

Solutions Collecting From Web of "Wie erstelle ich einen Shortcode mit Hover und komplexen Optionen"

Gradient und Boxshadow können inline eingefügt werden. Ihr Problem wird mit den Hover-States sein. Zum Glück gibt es einen Trick. Sie können die Hover-Stile in ein äußeres Element einfügen und erben bei Hover erzwingen. So was:

  

In Ihrer style.css fügen Sie diese generische Zeile mit einem Übergangseffekt als Bonus hinzu:

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