Programatically trigger browser's default hover effect on HTML input

Question

Consider:

<input type="radio" id="a"/>
<label for="a">Hello</a>

When you mouse over the radio button or the label, the radio button gets highlighted. Different browsers highlight it differently, but it looks like a default behavior. Now let's say there is a

<div id="bla">blabla</div>

somewhere else on the page. Is there any way to trigger that default highlight of the radio button when mousing over the div#bla?

EDIT: To clarify, I was looking to "trigger" a native ":hover" pseudo-class of an element, which is not possible. Spec

Answer 1

JUST FOR INFO

to normalize your hover effect through different browsers:

input[type='radio']:hover{
//add your css here
}

you can also use :active, :checked, :before, :after to add more styles to it.

ANSWER TO YOUR QUESTION

Your question requires to handle the hover effect with some javascript.

$('#bla').hover(function(){
  $(":radio").css(//add your rules here);
});

EDIT:

My solution requires using CSS. What you want to get is to add a pseudo class (:hover) to an element. This is not possible. See this SO question for further details.

Answer 2

From the spec:

More than one label may be associated with the same control by creating multiple references via the for attribute

Given that, you could just turn your div into another label to achieve exactly what you want without the need for any CSS or JavaScript.

Note that, if this new label is not a descendant of the input element's form then you should use its form attribute to specify the ID of the form

Of course, if you don't want focus to be transferred to the input element when clicking on the second label then you'd need a little bit of JavaScript but I wouldn't recommend doing that.