javascript - 当父元素悬停/ Activity /关注时隐藏元素

好的，我正在尝试将div class =“ item”的h6隐藏在hover / active / focus上，并且仅隐藏当前的h6（因为存在具有item class的多个div）-然后当它们不重新显示时。 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"});});

等等...

最佳答案

使用纯CSS，更清洁，更轻松：

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