Question

我遇到了html5和css3的问题，当我将鼠标悬停在图片中时，会发生一些错误。是为了让他出现在前2但不会出现只是在图像中悬停出现很快就已经知道告诉我为什么会这样？在第一张图像下方，系统正常运行，第二张图像在图像中悬停。

我的代码HTML5：

<div class="col-lg-12" id="container">
    <div class="ala col-lg-3 col-md-4 col-sm-6 col-xs-12 col-md-25">
        <span style="position: absolute;top: -25px;font-size:1rem;margin-left: -30px;color:#666;left: 50%;font-family:'Lato', sans-serif;display:block" class="rate"> <input type="checkbox" name="star[]" class="star" value="1" id="star_1" checked>Favorita</span>
        <div class="hovereffect clic">
           <div class="clic" style="display:block"></div>
                <div class="heart"></div>
                   <img class="img-responsive" src="../images/photo/namePhoto.jpg" alt="namePhoto">
            <div class="overlay">
                 <a class="info test-popup-link" href="../images/photo/namePhoto.jpg"><img src="../images/lupa.png"></a><br><br><br>

            <div class="btn-group" data-toggle="buttons">
                 <label class="btn btn-primary check active">
                   <input type="checkbox" class="ck" name="ck[]" checked value="1" id="ck_1"> <span class="che">Desmarcar</span>
                </label>
            </div>
        </div>
    </div>
</div>

我突出显示的元素CSS代码：

.hovereffect .clic {
    background-color: #13B8DC;
    z-index: 1;
    overflow: hidden;
    width: 80px;
    height: 80px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    position: absolute;
    top: -30px;
}

.clic:before {
    content: "\f00c";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    top: 9px;
    color: #fff;
    z-index: 2;
    font-size: 1rem;
    left: 4px;
}

.hovereffect .heart {
    width: 80px;
    height: 80px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    position: absolute;
    right: -80px;
    top: -25px;
}

.heart {
    background-color: #f36a5a;
    z-index: 1;
}

.heart:before {
    content: "\f004";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    top: 31px;
    color: #fff;
    z-index: 2;
    font-size: 1.1rem;
    left: 4px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.ala{
        width: 100%;
        break-before: avoid;
        break-after: avoid;
        break-inside: avoid;
        margin-top: 30px;
    }

    #container{
        column-count: 5;
        column-gap: 0;
    }

这些是出现在第一张图片和第二张图片中的代码，但是没有出现在其他图片中，是否有人可以告诉我如何纠正此错误？

这个演示： https://jsfiddle.net/h69atvrc/

Answer 1

- ＆GT;请附件fontawesome库和链接CSS在HTML中 - ＆GT;还设置图像路径

＆＃13;

.ala {
  margin-top: 30px;
}

.clic::before {
  color: #ffffff;
  content: '\f00c';
  font-family: 'FontAwesome';
  font-size: 14px;
  left: 4px;
  position: absolute;
  top: 9px;
  z-index: 2;
}

.clic {
  border-color: #13b8dc;
}

.hovereffect {
  cursor: default;
  float: left;
  height: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

.hovereffect .clic {
  background-color: #13b8dc;
  height: 80px;
  overflow: hidden;
  position: absolute;
  top: -30px;
  transform: rotate(-45deg);
  transform-origin: 0 100% 0;
  width: 80px;
  z-index: 1;
}

.hovereffect .heart {
  height: 80px;
  position: absolute;
  right: -80px;
  top: -25px;
  transform: rotate(-45deg);
  transform-origin: 0 100% 0;
  width: 80px;
}

.heart {
  background-color: #f36a5a;
  z-index: 1;
}

.hovereffect img {
  display: block;
  position: relative;
  transition: all 0.2s linear 0s;
}

.hovereffect .overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: all 0.2s ease-in-out 0s;
  width: 100%;
}

.heart::before {
  color: #ffffff;
  content: '\f004';
  font-family: 'FontAwesome';
  font-size: 14px;
  left: 4px;
  position: absolute;
  top: 31px;
  transform: rotate(90deg);
  z-index: 2;
}

.hovereffect:hover .overlay {
  opacity: 1;
}

＆＃13;

<div class="ala col-lg-3 col-md-3 col-sm-6 col-xs-12 col-md-25">
  <span style="position: absolute;top: -25px;font-size:1rem;margin-left: -30px;color:#666;left: 50%;font-family:'Lato', sans-serif;display:block" class="rate"></span>
  <div class="hovereffect clic">
    <div class="clic" style="display:block"></div>
    <div class="heart"></div>
    <img class="img-responsive" src="image01.jpg" alt="namePhoto">
    <div class="overlay">
      <a class="info test-popup-link" href="image02.jpg"></a>
      <br>
      <br>
      <br>
      <br>
      <br>
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary check active">
                    <input class="ck" name="ck[]" checked="" value="1" id="ck_1" type="checkbox"> <span class="che">Desmarcar</span>
                  </label>
      </div>
    </div>
  </div>
</div>

＆＃13;

强文

元素仅出现在悬停中

1 个答案: