Проблема: при наведении курсора мыши на текстовое описание пользователь перемещается над несколькими элементами.Первоначально он работает, но затем не отображается относительно того, где находится курсор.
См. Изображение ниже:
Jsfiddle: JSFIDDLE
$(document).ready(function() {
$(".book-description").text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur")
});
.book-item {
width: 500px;
padding: 10px;
height: 300px;
}
.book-image {
padding-right: 35px;
float: left;
}
.book-thumbnail {
height: 240px
}
.book-content {
margin-left: 35px
}
.book-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 24px;
margin-top: 6px;
margin-bottom: 6px;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px;
color: #313131;
}
.book-author {
margin-bottom: 10px;
letter-spacing: -1px;
font-weight: 400;
color: rgba(49, 49, 49, 0.5);
}
.book-description {
/* overflow-y: auto;
max-height: 150px; */
position: absolute;
font-size: 18px;
z-index: 999;
display: none;
background: lightyellow;
width: 200px;
font-size: 18px;
position: fixed;
}
.book-description-icon {
position: relative;
font-size: 16px;
font-style: italic;
letter-spacing: 0px;
color: rgba(49, 49, 49, 0.5);
display: block;
padding: 20px 0 20px 0;
cursor: pointer;
}
.book-description-icon:hover+.book-description {
display: block;
width: 500px;
-webkit-animation: fadein 1s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s;
/* Firefox < 16 */
-ms-animation: fadein 1s;
/* Internet Explorer */
-o-animation: fadein 1s;
/* Opera < 12.1 */
animation: fadein 1s;
}
.book-icons {
position: relative;
top: 20%
}
.book-search input {
width: 350px;
margin: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<div class="book-item"> <span class="book-image">
<img class="book-thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/71T0PJT2F1L._SX316_BO1,204,203,200_.gif" />
</span>
<div class="book-content">
<h3 class="book-title">{title}</h3>
<p class="book-author">by {authors}</p>
<span class="book-description-icon">{description}</span>
<p class="book-description"></p>
<span class="book-icons">{icons}</span>
</div>
</div>
</div>
<div class="col">
<div class="book-item"> <span class="book-image">
<img class="book-thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/71T0PJT2F1L._SX316_BO1,204,203,200_.gif" />
</span>
<div class="book-content">
<h3 class="book-title">{title}</h3>
<p class="book-author">by {authors}</p>
<span class="book-description-icon">{description}</span>
<p class="book-description"></p>
<span class="book-icons">{icons}</span>
</div>
</div>
</div>
<div class="col">
<div class="book-item"> <span class="book-image">
<img class="book-thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/71T0PJT2F1L._SX316_BO1,204,203,200_.gif" />
</span>
<div class="book-content">
<h3 class="book-title">{title}</h3>
<p class="book-author">by {authors}</p>
<span class="book-description-icon">{description}</span>
<p class="book-description"></p>
<span class="book-icons">{icons}</span>
</div>
</div>
</div>
<div class="col">
<div class="book-item"> <span class="book-image">
<img class="book-thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/71T0PJT2F1L._SX316_BO1,204,203,200_.gif" />
</span>
<div class="book-content">
<h3 class="book-title">{title}</h3>
<p class="book-author">by {authors}</p>
<span class="book-description-icon">{description}</span>
<p class="book-description"></p>
<span class="book-icons">{icons}</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="book-item"> <span class="book-image">
<img class="book-thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/71T0PJT2F1L._SX316_BO1,204,203,200_.gif" />
</span>
<div class="book-content">
<h3 class="book-title">{title}</h3>
<p class="book-author">by {authors}</p>
<span class="book-description-icon">{description}</span>
<p class="book-description"></p>
<span class="book-icons">{icons}</span>
</div>
</div>
</div>
<div class="col">
<div class="book-item"> <span class="book-image">
<img class="book-thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/71T0PJT2F1L._SX316_BO1,204,203,200_.gif" />
</span>
<div class="book-content">
<h3 class="book-title">{title}</h3>
<p class="book-author">by {authors}</p>
<span class="book-description-icon">{description}</span>
<p class="book-description"></p>
<span class="book-icons">{icons}</span>
</div>
</div>
</div>
<div class="col">
<div class="book-item"> <span class="book-image">
<img class="book-thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/71T0PJT2F1L._SX316_BO1,204,203,200_.gif" />
</span>
<div class="book-content">
<h3 class="book-title">{title}</h3>
<p class="book-author">by {authors}</p>
<span class="book-description-icon">{description}</span>
<p class="book-description"></p>
<span class="book-icons">{icons}</span>
</div>
</div>
</div>
<div class="col">
<div class="book-item"> <span class="book-image">
<img class="book-thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/71T0PJT2F1L._SX316_BO1,204,203,200_.gif" />
</span>
<div class="book-content">
<h3 class="book-title">{title}</h3>
<p class="book-author">by {authors}</p>
<span class="book-description-icon">{description}</span>
<p class="book-description"></p>
<span class="book-icons">{icons}</span>
</div>
</div>
</div>
</div>
</div>
Для репликации наведите курсор на несколько элементов на jsfiddle, и вы увидите.