8

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

Dimskiy
  • 5,233
  • 13
  • 47
  • 66

5 Answers5

3

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.

Community
  • 1
  • 1
Lelio Faieta
  • 6,457
  • 7
  • 40
  • 74
  • This requires writing CSS which would make it look the same in all browsers. I'm asking about triggering the hover effect without custom CSS. Like in FireFox, you would mouse over #bla and the radio button lights up in a blueish color (grey in Chrome). – Dimskiy May 19 '15 at 16:38
  • the answer is in the second part of my answer. The first one is just an addition. – Lelio Faieta May 19 '15 at 16:38
  • Lelio, I understand what you meant. But .css( ) would require me to write CSS rules, which means that the highlight will look the same across all browsers. I'm not looking to do that. I'm looking to somehow trigger the default highlight behavior. If you look at a radio button in FireFox, mouse over it, it would light up in blue. Do the same in Chrome, it would light up in grey. – Dimskiy May 19 '15 at 16:44
  • ok got it. So you only want to trigger the browser's event! Sorry, didn't get it before. – Lelio Faieta May 19 '15 at 16:47
1

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.

Shaggy
  • 6,696
  • 2
  • 25
  • 45
0

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') }
);
Greg
  • 1,225
  • 3
  • 16
  • 35
  • This requires writing CSS which would make it look the same in all browsers. I'm asking about triggering the hover effect without custom CSS. Like in FireFox, you would mouse over #bla and the radio button lights up in a blueish color (grey in Chrome). – Dimskiy May 19 '15 at 16:36
0

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>
jad-panda
  • 2,509
  • 16
  • 22
  • This requires writing CSS which would make it look the same in all browsers. I'm asking about triggering the hover effect without custom CSS. Like in FireFox, you would mouse over #bla and the radio button lights up in a blueish color (grey in Chrome). – Dimskiy May 19 '15 at 16:38
  • @Dimskiy i don't think native radio button with label shows such glow effect on hover. http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_label – jad-panda May 19 '15 at 16:54
0

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

$("#bla").mouseenter(function(){
$("#lbl").addClass("hoverSimulate");
    $(".radioItem").prop("checked","true")
}).mouseleave(function(){
$("#lbl").removeClass("hoverSimulate");
      $(".radioItem").removeAttr("checked")
});
Ramanathan Muthuraman
  • 732
  • 3
  • 14