父元素懸停/活動/聚焦時隱藏元素

Question

好吧，我試圖隱藏h6在hover / active / focus上的div class =“item”，只有當前的一個（因為有多個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;}