Question

好吧我正试图隐藏h6在hover / active / focus上为div class =＆＃34; item＆＃34;并且只有当前的一个（因为有多个具有项目类的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"});});

等...

Answer 1

使用纯css，更清洁，更容易：

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

父元素悬停/活动/聚焦时隐藏元素

1 个答案: