悬停一个 div，影响另一个 (CSS)

Question

我设法通过使用“+”选择器将鼠标悬停在另一个 div 上来影响一个 div，我想避免这种情况。即使 .h div 和 .t div 在不同的 parents.

中，我也希望它能工作

这是我现在得到的：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

使用jquery的简单解决方案使用.hover()和.toggleClass()

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

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

.hide{
    display: none;
}

悬停一个 div，影响另一个 (CSS)

Hover a div, affect another (CSS)

html

css

hover

selector

Fiddle