showing and hiding the closest element on hover not working

user_8529972 0
Viewed 34

I have multiple elements in a page that look like this:

<div>
    <span class="content_video_wrapper_video_icon">
        <i class="glyphicon glyphicon-facetime-video"></i>
    </span>
    <span class="content_video_wrapper_video_text" style="display: none;">
        <a href="...">Go to video</a>
    </span>
</div>
<div>
    <span class="content_video_wrapper_video_icon">
        <i class="glyphicon glyphicon-facetime-video"></i>
    </span>
    <span class="content_video_wrapper_video_text" style="display: none;">
        <a href="...">Go to video</a>
    </span>
</div>
<div>
    <span class="content_video_wrapper_video_icon">
        <i class="glyphicon glyphicon-facetime-video"></i>
    </span>
    <span class="content_video_wrapper_video_text" style="display: none;">
        <a href="...">Go to video</a>
    </span>
</div>

I'm using jquery to show and hide on hover the closest element that has the class content_video_wrapper_video_text like so:

$(".content_video_wrapper_video_icon").each((i, el) => {
    $(el).hover(
        function() {
            $(this).closest(".content_video_wrapper_video_text").show()
        },
        function() {
            $(this).closest(".content_video_wrapper_video_text").hide()
        }
    )
})

What am I doing wrong?

jquery
1 Answers

As closest traverses upwards, try with the code changes below:
(gets the closest div, and then find the desired element)

$(".content_video_wrapper_video_icon").each((i, el) => {
    $(el).hover(
        function() {
         //   $(this).closest(".content_video_wrapper_video_text").show()
            $(this).closest('div').find(".content_video_wrapper_video_text").show()
        },
        function() {
         //   $(this).closest(".content_video_wrapper_video_text").hide()
            $(this).closest('div').find(".content_video_wrapper_video_text").hide()
        }
    )
})
user_76440180
Related