将鼠标悬停在显示关联的 div 上

Question

我有一个带有data-id属性的div类"asset-container"。我还有一个带有关联数据 ID 的div 类"弹出内容"。

当我将鼠标悬停在"资产容器"上时，我想要"弹出框内容"显示。

有很多这样的，这就是为什么我将数据 ID 附加到两个div 中的每一个，以便我可以调用关联的div 来显示。

我已经尝试了几次脚本迭代，但一无所获

.js：

$(document).ready(function() {
    custom_popover();
});
function custom_popover() {
    $(".asset-container").mouseover(function() {
    $('.popover-content [data-id=' + this.value + ']').show();
   });
}

.html：

<ul class="col-xs-4">
    <li class="thumnail-video">
        <div class="popover-content" data-id="71"></div>
        <div class="asset-container">
    <video class="img-responsive portrait" type="video/mp4" src="https://ternpro-development.s3.amazonaws.com/media/films/71/mobile/3.mp4" data-id="71">      </video>
    </div>
</li>
</ul>
<ul class="col-xs-4">
<li class="thumnail-video">
    <div class="popover-content" data-id="69"></div>
    <div class="asset-container">
    <video class="img-responsive landscape" type="video/mp4" src="https://ternpro-development.s3.amazonaws.com/media/films/69/mobile/2.mp4" data-id="69"></video>
            </div>
        </li>
    </ul>
</div>

Answer 1

将代码更改为：

$(".asset-container").mouseover(function() {
   var id = $(this).children("video").data("id");
   $(this).parent().children('.popover-content[data-id=' + id + ']').show();
});