CODEWITHSUNDEEP
jquery
Waterfall
Waterfall

Reputation: 704

jQuery mouseover and mouseleave not working consistently

When I hover over an image a non-visible content area appears. When you leave that image it should go away. In the example I have below there are only 2 but it is already an issue. When I also tested with a lot more records it went from bad to worse. The problem is that it seems to get stuck. Some times it works okay and other times it will leave the last one you moused over in a hover state (see attached image for reference)

enter image description here

Here is the html and jQuery

$('.section-artworks .image_list ul li .image').mouseover(function() {
  var c = $(this).closest('li').find('.content');
  $(c).addClass('visible');
  $(this).closest('li').siblings().addClass('whiteout');
})

$('.section-artworks .image_list ul li .content').mouseleave(function() {
  $(this).removeClass('visible');
  $(this).closest('li').siblings().removeClass('whiteout');
});
.section-artworks .image_list ul li {
  display: inline-block;
  margin-bottom: 40px;
  position: relative;
  opacity: 1;
  transition: opacity .1s ease-in-out;
  -moz-transition: opacity .1s ease-in-out;
  -webkit-transition: opacity .1s ease-in-out
}

.image_list ul li .content .title {
  font-size: 14px;
  line-height: 20px;
  min-height: 60px;
  display: block;
}

.records_list ul li .image {
  position: relative;
  margin-bottom: 15px;
  z-index: 4;
}

.image_list ul li .content {
  transition: none;
  position: absolute;
  left: -24px;
  top: -24px;
  padding: 194px 24px 24px;
  box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.11), -2px 1px 4px 0px rgba(0, 0, 0, 0.11);
  background-color: white;
  opacity: 0;
  z-index: 2;
  text-align: left;
  overflow: hidden;
  max-height: 0;
}

.section-artworks .image_list ul li .title {
  text-align: left;
  min-height: 0;
  margin-top: 7px;
}

.section-artworks .image_list ul li .medium,
.section-artworks .image_list ul li .dimensions,
.section-artworks .image_list ul li .culture,
.section-artworks .image_list ul li .period {
  color: #939393;
  text-transform: none;
  margin: 0;
  text-align: left;
  font-size: 13px;
  padding: 0;
  line-height: 19px;
}

.section-artworks .image_list ul li.whiteout {
  opacity: 0.65;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
}

.section-artworks .image_list ul li .content {
  max-height: 600px;
  /*   pointer-events: none;*/
  transition: opacity .1s ease-in-out;
  -moz-transition: opacity .1s ease-in-out;
  -webkit-transition: opacity .1s ease-in-out;
}

.section-artworks .image_list ul li .content.visible {
  opacity: 1;
  transition: opacity .3s ease-in-out;
  -moz-transition: opacity .3s ease-in-out;
  -webkit-transition: opacity .3s ease-in-out;
}

.section-artworks .image_list ul li {
  width: 208px;
}

.section-artworks .image_list ul li .image,
.section-artworks .image_list ul li .image span {
  width: 208px;
  height: 160px;
}

.section-artworks .image_list ul li .image img {
  max-width: 208px;
  max-height: 160px;
}
<body class="section-artworks">


  <div class="records_list image_list  clearwithin">
    <ul>
      <li class="">
        <a href="#">
          <span class="image"><span>
                                <img src="https://picsum.photos/200/300">
                            </span></span>
          <span class="content">
                            <span class="title"><span class="title">The title here</span></span>
          <div class="detail_view_module">
            Description goes here<br> Description goes here<br> Description goes here<br> Description goes here<br>
          </div>
          </span>
        </a>
      </li>
      <li class="">
        <a href="#">
          <span class="image"><span>
                                <img src="https://picsum.photos/200/300">
                            </span></span>
          <span class="content">
                            <span class="title"><span class="title">The title here</span></span>
          <div class="detail_view_module">
            Description goes here<br> Description goes here<br> Description goes here<br> Description goes here<br>
          </div>
          </span>
        </a>
      </li>
    </ul>
  </div>


  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

Here is another screen shot from the snippet

enter image description here

Upvotes: 0

Views: 48

Answers (1)

mplungjan
mplungjan

Reputation: 177685

I cannot reproduce this in Chrome I can however shorten it to only use LIs which may help you

$('.section-artworks .image_list ul li').on("mouseover mouseleave", function(e) {
  $(this).find('.content').toggleClass('visible', e.type === "mouseover")
  $(this).siblings().toggleClass('whiteout', e.type === "mouseover")
})
.section-artworks .image_list ul li {
  display: inline-block;
  margin-bottom: 40px;
  position: relative;
  opacity: 1;
  transition: opacity .1s ease-in-out;
  -moz-transition: opacity .1s ease-in-out;
  -webkit-transition: opacity .1s ease-in-out
}

.image_list ul li .content .title {
  font-size: 14px;
  line-height: 20px;
  min-height: 60px;
  display: block;
}

.records_list ul li .image {
  position: relative;
  margin-bottom: 15px;
  z-index: 4;
}

.image_list ul li .content {
  transition: none;
  position: absolute;
  left: -24px;
  top: -24px;
  padding: 194px 24px 24px;
  box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.11), -2px 1px 4px 0px rgba(0, 0, 0, 0.11);
  background-color: white;
  opacity: 0;
  z-index: 2;
  text-align: left;
  overflow: hidden;
  max-height: 0;
}

.section-artworks .image_list ul li .title {
  text-align: left;
  min-height: 0;
  margin-top: 7px;
}

.section-artworks .image_list ul li .medium,
.section-artworks .image_list ul li .dimensions,
.section-artworks .image_list ul li .culture,
.section-artworks .image_list ul li .period {
  color: #939393;
  text-transform: none;
  margin: 0;
  text-align: left;
  font-size: 13px;
  padding: 0;
  line-height: 19px;
}

.section-artworks .image_list ul li.whiteout {
  opacity: 0.65;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
}

.section-artworks .image_list ul li .content {
  max-height: 600px;
  /*   pointer-events: none;*/
  transition: opacity .1s ease-in-out;
  -moz-transition: opacity .1s ease-in-out;
  -webkit-transition: opacity .1s ease-in-out;
}

.section-artworks .image_list ul li .content.visible {
  opacity: 1;
  transition: opacity .3s ease-in-out;
  -moz-transition: opacity .3s ease-in-out;
  -webkit-transition: opacity .3s ease-in-out;
}

.section-artworks .image_list ul li {
  width: 208px;
}

.section-artworks .image_list ul li .image,
.section-artworks .image_list ul li .image span {
  width: 208px;
  height: 160px;
}

.section-artworks .image_list ul li .image img {
  max-width: 208px;
  max-height: 160px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body class="section-artworks">
  <div class="records_list image_list  clearwithin">
    <ul>
      <li class="">
        <a href="#">
          <span class="image"><span><img src="https://picsum.photos/200/300"></span></span>
          <span class="content"><span class="title"><span class="title">The title here</span></span>
          <div class="detail_view_module">
            Description goes here<br> Description goes here<br> Description goes here<br> Description goes here<br>
          </div>
          </span>
        </a>
      </li>
      <li class="">
        <a href="#">
          <span class="image"><span><img src="https://picsum.photos/200/300"></span></span>
          <span class="content"><span class="title"><span class="title">The title here</span></span>
          <div class="detail_view_module">
            Description goes here<br> Description goes here<br> Description goes here<br> Description goes here<br>
          </div>
          </span>
        </a>
      </li>
    </ul>
  </div>
</body>

Upvotes: 1

Related Questions