Question

考虑：

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

将鼠标悬停在单选按钮或标签上时，单选按钮会突出显示。不同的浏览器以不同的方式突出显示它，但它看起来像默认行为现在让我们说有一个

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

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

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

Answer 1

JUST FOR INFO

通过不同的浏览器规范化您的悬停效果：

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

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

回答您的问题

您的问题需要使用一些javascript来处理悬停效果。

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

修改

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

Answer 2

来自the spec：

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

鉴于此，您可以将div转换为另一个label，以实现您想要的效果，而无需任何CSS或JavaScript。

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

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

Answer 3

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

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

Answer 4

使用原生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>

Answer 5

查看https://jsfiddle.net/L8aw5dts/1/

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

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

5 个答案: