How can I write 'a:hover' in inline CSS?

javascript

event-handling

dom-interactions

performance-optimization

byAlex Kataev·Nov 11, 2024

To simulate :hover in inline CSS, we need JavaScript’s event handling:

<a href="#" 
   onmouseover="this.style.backgroundColor='#ffff00'" 
   onmouseout="this.style.backgroundColor=''">Hover me!</a>

The background color is yellow when you hover over the link, and it gets cleared when you stop hovering.

Make JavaScript handle hover events

Although inline styles are limited and cannot support pseudo-classes like :hover due to W3C standards, they can work hand in hand with JavaScript to yield dynamic hover effects.

Hovering 101 with JavaScript events

JavaScript events such as onmouseover and onmouseout can be utilized directly in your HTML elements, mimicking the :hover effects:

<span onmouseover="this.style.color='green'" 
      onmouseout="this.style.color='initial'">Hover for color morph!</span>

It's like sprinkling fairy dust with JavaScript magic. 😉

Efficient hover creation for multiple elements

For multiple elements, use JavaScript to add dynamic hover effects to a particular class. That beats writing JavaScript a zillion times!

This version of yourself from the future says "Thank you!" for saving time:

function addHoverEffect(className, hoverStyle) {
  var elements = document.getElementsByClassName(className);
  for (var i = 0; i < elements.length; i++) {
    elements[i].onmouseover = function() { this.style.cssText = hoverStyle; };
    elements[i].onmouseout = function() { this.style.cssText = ''; };
  }
}

You can then call this function with the desired class name and hover styles:

addHoverEffect('hoverable', 'color: red; background: yellow;');

HTML email hover considerations

For HTML emails, inline hover effects using JavaScript can be a tough cookie! These could range from partially effective to a total letdown.

Therefore, focus on asking the question, "Does my email render well across most platforms?", instead of "How cool do my hover effects look?"

Yeah, sometimes you gotta KISS (Keep It Simple, Silly). 😊

Harnessing CSS variables and JavaScript

Dynamic hover effects with CSS variables

CSS variables can be dynamically manipulated by JavaScript, making them the wildcard entry to the hover party in inline styles:

document.documentElement.style.setProperty('--hover-color', 'red');

Efficient and readable DOM interactions

Using JavaScript to frequently meddle with the DOM could impact browser performance. So instead of rushing into every DOM party, let's be fashionably late:

document.addEventListener('mouseover', function(event) {
  if (event.target.matches('.hoverable')) {
    event.target.style.backgroundColor = 'red';
  }
});