将鼠标悬停在多个项目上后，鼠标悬停文本会放错位置

时间：2018-06-23 14:39:34

标签： css css3 hover styles mouseover

问题：用户将鼠标悬停在多个项目上后，鼠标悬停在文本说明上的位置放错了位置。它最初可以工作，但是相对于光标悬停的位置不会出现。

请参见下图：

INFO TEXT MISPLACED

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

1 个答案:

答案 0 :(得分：2)

您的问题不是悬停在鼠标上，而是向下滚动。

将position: relative添加到book-content上的position: absolute和book-description

您已经添加了位置：书本说明中的位置为固定位置和绝对位置，请删除固定位置。

$(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

相关问题
最新问题