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

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

• javascript
• jquery
• html
• css

• add class to the input, on hovering the div#bla – Ramanathan Muthuraman Commented May 19, 2015 at 16:15

5 Answers 5

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.

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 remend doing that.

You can't force the hover event via javascript, you have to simulate it. You can create a css class that creates the desired effects, you might want to use a border or something. Then you can toggle that class via javascript. Here's some code using jQuery.

$('#bla').hover(
    function() { $('#a').addClass('effect') }, 
    function() { $('#a').removeClass('effect') }
);

Check this out https://jsfiddle/L8aw5dts/1/

$("#bla").mouseenter(function(){
$("#lbl").addClass("hoverSimulate");
    $(".radioItem").prop("checked","true")
}).mouseleave(function(){
$("#lbl").removeClass("hoverSimulate");
      $(".radioItem").removeAttr("checked")
});

solution using native javascript. you can listen for click event on #bla element. and then set checked value of radio button on click and effects on mouseover and mouseout effect.

var bla = document.getElementById('bla');
var aradio = document.getElementById('a');

bla.addEventListener('click', function() {
  aradio.checked = 'checked';
});

bla.addEventListener('mouseover', function() {
  aradio.classList.add('green-effect');
});

bla.addEventListener('mouseout', function() {
  aradio.classList.remove('green-effect');
});

.green-effect{
  outline: 1px solid green; 
}

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

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