Question

我设法通过使用“+”选择器悬停在不同的div上来影响一个div，我希望避免使用它。即使.h div和.t div在不同的父母身边，我也希望这项工作能够实现。

这就是我现在所拥有的： http://jsfiddle.net/FranLegon/y06gg3vt/

（它可能看起来像一个重复的问题，答案并没有帮我解决这个问题）虽然我只想使用CSS，但如果它是唯一的方法，请随意使用javascript。

Answer 1

CSS没有父级或堂兄选择器，因此您需要JavaScript：

var h= document.querySelector('.h');
var t= document.querySelectorAll('.ts .t');

h.addEventListener('mouseover', function() {
  for(var i = 0 ; i < t.length ; i++) {
    t[i].style.display= 'none';
  }
});

h.addEventListener('mouseout', function() {
  for(var i = 0 ; i < t.length ; i++) {
    t[i].style.display= 'inline-block';
  }
});

Fiddle

Answer 2

使用.hover()和.toggleClass()

的jquery的简单解决方案

http://jsfiddle.net/y06gg3vt/2/

$(document).ready(function() {
    $('.h').hover(function() {
        $('.ts .t').toggleClass('hide');
    });
});

.hide{
    display: none;
}

悬停div，影响另一个（CSS）

2 个答案:

Fiddle