html - 在悬停之前获取html元素

因此，我试图将元素放在我悬停的元素旁边。所以，如果我有：

<div class="parent">
  <div class="thing1"></div>
  <input type="text" class="thing2" />
</div>

当您将鼠标悬停在.thing2上时，我希望thing1对其应用边框。这可能吗？这是我到目前为止的内容，但是没有用...

.thing1:hover ~ .thing2 {
  border: 1px solid #707070;
}

最佳答案

如果您不反对使用Javascript，建议使用JQuery来完成此操作。

像这样：

 $(document).ready(function() {
  $('.thing2').hover(function() {
    $('.thing1').css('border', '1px solid red');
    $('.thing2').mouseleave(function() {
      $('.thing1').css('border', 'none');
    })
  });
});

编辑：

jsfiddle

我还添加了代码以在鼠标离开时删除边框。如果您不希望出现这种情况，可以删除以下行。

$('.thing2').mouseleave(function() { $('.thing1').css('border', 'none');})

关于html - 在悬停之前获取html元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52707596/