在悬停时隐藏背景图层，将鼠标悬停在上方时会收起 <p> 元件

Question

我正在使用mixitup库创建可排序的网格。 我在单个网格项目（.mix）上方有一个覆盖网格项目（.image-over）。 将鼠标悬停在网格项目上时，背景中的div（带有背景图像）会变得模糊（.mix），并且显示的文本会被隐藏（h1）。 在覆盖的div中，将显示一个新文本（p.descfirst）。 当我将鼠标悬停在里面的新文本上时

文本重新出现（h1）。 关于如何避免这种情况的任何建议？

 .mix, .gap { display: inline-block; vertical-align: top; } .mix { background: #fff; margin-bottom: 1rem; position: relative; -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); transition: .4s ease-in-out; z-index: -1; } .image-over:hover .mix { position: relative; -webkit-filter: grayscale(100%) blur(2px); filter: grayscale(100%) blur(2px); transition: .1s ease-in-out; } .image-over { display: inline-block; position: relative; top: 0; z-index: 600; background: transparent; } .mix:before { content: ''; display: inline-block; padding-top: 100%; } .mix h1 { font-weight: 1600; font-size: 500em; color: #fff; position: absolute; z-index: 2; top: 0; margin: 0 auto; padding: 5px; background: rgba(0, 0, 0, 0.3); } .mix:hover h1 { display: none; } .image-over:hover>p.descfirst { position: absolute; top: 40px; left: 40px; color: #ffffff; font-size: 16px; font-weight: bold; z-index: 1; transition: .2s ease-in-out; line-height: 25px; margin: 0; } 

 <div class="container"> <a href="./show.html"> <div class="image-over"> <p class="descfirst">Progressive</p> <div class="mix pink large square" style="background: url('./img/night.jpg')"> <h1>3 | Test</h1> </div> </div> </a> </div> 

更新资料

由于运行摘要示例无法真正起作用，因此此处提供了一些截图以演示该问题。

Answer 1

我将使用mouseenter事件代替css进行jquery。

https://api.jquery.com/mouseenter/

$( "#outer" ).mouseenter(function() {
    $( "#inner" ).doStuffHere();
});