Question

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

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

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

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

Answer 1

您将必须颠倒.thing1和.thing2的顺序才能获得所需的结果。并使用定位CSS来补偿布局差异。只有这样，您才能使用.thing2:hover + .thing1选择器。

这是通过Pure-CSS解决方案实现的，没有任何JavaScript性能开销。

Answer 2

如果您不反对使用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'); })

Answer 3

我认为此链接会为您提供帮助 Select specific element before other element

Css没有提供将在选择器之前定位的选择器。

解决方案
您可以使用jQuery，jQuery提供了简单美观的选择方法。

常见的CSS选择器
https://www.w3schools.com/cssref/css_selectors.asp

Answer 4

如果使用jquery，则可以在使用鼠标悬停thing2时在thing1上设置一个类。

$('.thing2').mouseenter(function() {
    $(this).closest('.thing1').addClass('customBorderClass');
});
$('.thing2').mouseleave(function() {
    $(this).closest('.thing1').removeClass('customBorderClass');
});

然后将您的CSS应用于在悬停时添加/删除的customBorderClass：

.customBorderClass {
    border-style: solid;
}

在悬停之前获取html元素

4 个答案: