【发布时间】：2018-12-02 18:33:58
【问题描述】：
问题：当用户将鼠标悬停在多个项目上后，鼠标悬停在文本描述上会错位。它最初可以工作，但相对于光标悬停的位置不会出现。
见下图：
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 上的多个项目上，您会看到。
【问题讨论】：
-
我的解决方案对您有用吗？
标签： css hover styles mouseover