Javascript 当父元素悬停/激活/聚焦时隐藏元素

好的，我正试图隐藏div class=“item”的h6 on hover/active/focus，并且只隐藏当前的一个（因为有多个div具有item class）-然后当它们不重新显示时。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>

---

等等。

使用纯css，更干净、更简单：

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

---

您忘记发布您尝试过的JavaScript/jQuery。@j08691将jQuery添加到中。H-ll LOL是什么-我将其设置为。item>h6:hover。非常感谢！

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