javascript - 当父元素悬停/事件/聚焦时隐藏元素

Question

好吧，我正在尝试隐藏 div class="item"的 hover/active/focus 上的 h6，并且只隐藏当前的 h6(因为有多个 div 带有 item 类)- 然后当它们不重新显示它时。 h6 是图像上的标题，figcaption 是滚动标题。因此，如果 figcaption 翻转处于 100% 不透明度，这两者是竞争的，不会成为问题，但事实并非如此。对于这个例子，css :hover 和 z-index 将不起作用。这看起来很简单，但我一直被它绊倒并在任何项目悬停时隐藏 h6。

        <div class="item w1 h1"><h6>Test</h6>
        <figure><img src="img/test.jpg" alt="Test" />
            <figcaption>
                <p>Test Test</p>
            </figcaption>
        </figure>
    </div>

   <div class="item w1 h1"><h6>Test 2</h6>
        <figure><img src="img/test2.jpg" alt="Test2" />
            <figcaption>
                <p>Test2 Test2</p>
            </figcaption>
        </figure>
    </div>

我使用过这个 jQuery 的许多变体...

$('.item h6').hover(function(event){$(this).css({display: 'none'});
$(".item").hover(function(){$("h6").css({display: "none"});});

等...

Answer 1

使用纯 css，更简洁、更容易:

.item:hover > h6 {display:none;}