鼠标悬停多个项目后，鼠标悬停文本放错了位置

Question

问题：当用户将鼠标悬停在多个项目上时，鼠标在文本描述上的位置会错位。它最初有效，但随后不会相对于光标悬停的位置出现。

见下图：

$(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 上的多个项目上，您会看到。

Answer 1

您的问题不在于多次悬停，而是在于向下滚动。

将 position: relative 添加到 book-content 并在 book-description

上添加 position: absolute

您在图书描述中添加了 position: fixed 和 absolute，请删除 position fixed。

$(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;
  position: relative;
}

.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;
}

.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>

已更新fiddle

鼠标悬停多个项目后，鼠标悬停文本放错了位置

mouseover text gets misplaced after hovering multiple items

css

hover

styles

mouseover