悬停在

Question

当用户将鼠标悬停在主图像上时，如何在主图像上获得以下href I图标复选标记。因此，当用户将鼠标悬停在图像上时，它会显示在图像的右上角。

      <div>
        <img class="result-image" src="{{$property->photo}}">
        <!-- Encoding photo to add to url -->
        @php
          $codedUrl = urlencode($property->photo);
        @endphp

          <a href="/watchlist/{{$property->id}}/add?image_url={{$codedUrl}}&address={{$property->address}}&town={{$property->town}}&county={{$property->county}}">
            <div class="add-btn
              @if(in_array($property->id, $arrayInfo))
                active
              @endif">
              <i class="fa fa-check" aria-hidden="true"></i></div>
          </a>
      </div>

这是我的CSS。

.result-image {
  position: relative;
  background: no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 200px;
  box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

Answer 1

您需要在该div中使包装div位置相对且a位于绝对位置。这就是你如何在图像上定位图标。

.result-image {
  box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.img-wrapper {
  height: 200px;
  position: relative;
  float: left 
}

.img-wrapper a {
  position: absolute;
  right: 0;
  top:0;
  display: none;
}

.img-wrapper:hover a {
  display: block;
}

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js"></script>


 
 <div class="img-wrapper">
    <img class="result-image" src="http://via.placeholder.com/200x200">
    <a href="#">
      <div class="add-btn">
          <i class="fa fa-check" aria-hidden="true"></i>
      </div>
    </a>
</div>