Make a div visible on image hover in owl carousel-CodePudding

I have owlcarousel like this in mvc

 <div >
            @if (Model?.CarrouselImages.Count > 0)
            {
                @foreach (var item in Model.CarrouselImages)
                {
                    <div >
                        <div><img src="~/@item.Src"   data-id="@item.Id"></div> 
                       <div id="info@{@item.Id}" style="display:none">@item.Name</div>
                    </div>
                }
            }
        </div>

I want on hover of each image carousel , the related div "info@{@item.Id}" for its description be visible

I did this on jQuery

   $(".hover-img").hover(function(){    
     var id = $(this).data("id");   
     var infoId="#info" id;   
   $(infoId).css('display','block');
     },function(){
       var id = $(this).data("id");
       var infoId="#info" id;
       $(infoId).css('display','none');
   })

But it just shows the first image description on its hover, the rest nothing happens. where could be possibly wrong?

CodePudding user response：

It seems you have an issue on id of each image. But it works in my demo, probably your ids not match or etc.

$(".hover-img").hover(function() {
  var id = $(this).data("id");
  var infoId = "#info"   id;
  $(infoId).css('display', 'block');
}, function() {
  var id = $(this).data("id");
  var infoId = "#info"   id;
  $(infoId).css('display', 'none');
})

.overlay {
  position: absolute;
  top: 0;
  background: red;
}

.item {
    position: relative;
}

.owl-carousel {
  display: flex
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >

  <div >
    <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcS1Lg205RV2hcJ2KzdqZ91E-D-9na2a-DyS8MuGKg&s"  data-id="1"/></div>
    <div id="info1"  style="display:none">Text 1</div>
  </div>

  <div >
    <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcS1Lg205RV2hcJ2KzdqZ91E-D-9na2a-DyS8MuGKg&s"  data-id="2"/></div>
    <div id="info2"  style="display:none">Text 2</div>
  </div>
</div>

But good news is, you don't need jQuery! you can done this only with pure css try:

.overlay {
  position: absolute;
  top: 0;
  background: red;
  display: none;
}

.item:hover .overlay {
  display: block;
}

/* DO NOT USE BELOW IN YOUR REAL CODE */

.item {
    position: relative;
}

.owl-carousel {
  display: flex
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >

  <div >
    <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcS1Lg205RV2hcJ2KzdqZ91E-D-9na2a-DyS8MuGKg&s" /></div>
    <div >Text 1</div>
  </div>

  <div >
    <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcS1Lg205RV2hcJ2KzdqZ91E-D-9na2a-DyS8MuGKg&s" /></div>
    <div >Text 2</div>
  </div>
</div>