以编程方式触发浏览器对HTML输入的默认悬停效果

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?

在页面的其他地方。当鼠标悬停在div＃bla上时，有没有办法触发单选按钮的默认突出显示？

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

编辑：为了澄清，我希望“触发”一个元素的原生“：hover”伪类，这是不可能的。规格

5 个解决方案

#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.

你也可以使用：active，：checked，：before，：after为它添加更多样式。

ANSWER TO YOUR QUESTION

回答你的问题

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

您的问题需要使用一些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.

我的解决方案需要使用CSS。您想要获得的是向元素添加伪类（：hover）。这不可能。有关详细信息，请参阅此SO问题。

#2

From the spec:

从规格：

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

通过for属性创建多个引用，可以将多个标签与同一控件相关联

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.

鉴于此，您可以将div转换为另一个标签，以实现您想要的，而无需任何CSS或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

请注意，如果此新标签不是input元素表单的后代，那么您应该使用其form属性来指定表单的ID

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.

当然，如果您不希望在单击第二个标签时将焦点转移到输入元素，那么您需要一些JavaScript，但我不建议这样做。

#3

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.

你不能通过javascript强制悬停事件，你必须模拟它。您可以创建一个css类来创建所需的效果，您可能想要使用边框或其他东西。然后你可以通过javascript切换该类。这是使用jQuery的一些代码。

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

#4

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

看看这个https://jsfiddle.net/L8aw5dts/1/

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

#5

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.

使用原生javascript的解决方案。你可以在#bla元素上听点击事件。然后设置单击时单选按钮的选中值以及鼠标悬停和鼠标输出效果的效果。

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>

#1