Is it possible to create inline pseudo styles? [duplicate]

by

Unfortunately no, you can’t implement hover effects using inline CSS.

A (poor) work-around for this problem is to have your controls render style blocks when they are rendered. For example, your control could render as:

<style type="text/css">
    .custom-class { background-color:green; }
    .custom-class:hover { background-color:Red; }
</style>
<a href="#" class="custom-class">Coding Horror</a>

If you could force your users to drop a “style control” at the top of their pages you could render all your custom classes there instead of rendering them next to each control, which would be a very, very bad thing (browsers will restart rendering every time they come across a style block, having a lot of style blocks scattered around your page will cause slow rendering).

Unfortunately there’s no elegant solution to this problem.

More Related Contents:

  1. How to remove the spaces between the form and the footer as shown below in the picture?
  2. CSS scoped custom property ignored when used to calculate variable in outer scope
  3. Select elements by attribute in CSS
  4. Hide text node in element, but not children
  5. Font Awesome 5, why is CSS content not showing?
  6. How and where to use ::ng-deep?
  7. CSS transparent curved shape with two rounded sides
  8. Is the CSS :not() selector supposed to work with distant descendants?
  9. How to animate handwriting text on the web page using SVG?
  10. Combining :last-child with :not(.class) selector in CSS
  11. Using HTML data-attribute to set CSS background-image url
  12. CSS transition shorthand with multiple properties?
  13. CSS blur on background image but not on content [duplicate]
  14. Why can’t I animate custom properties (aka CSS variables)?
  15. Set position absolute and margin
  16. Display image at 50% of its “native” size
  17. How can i stop jQuery mobile to apply styles to my specific form elements
  18. How can I reset a CSS-counter to the start-attribute of the given list
  19. Nesting pseudo-elements inside pseudo-elements
  20. Half hexagon shape with one element
  21. Show / hide div on click with CSS
  22. Background color of tabs in shiny tabPanel
  23. Targeting position:sticky elements that are currently in a ‘stuck’ state
  24. Merging selectors from mixins
  25. Styling HTML and BODY selector to height: 100%; vs using 100vh
  26. How to preserve line breaks in block?
  27. @media query not working in mobile. Works fine in Chrome
  28. filter: blur(1px); doesn’t work in Firefox, Internet Explorer, and Opera
  29. SASS CSS: Target Parent Class from Child
  30. Keep background image fixed during scroll using css

Leave a Comment