时间戳

首页 > 解决方案 > 右 div 模糊了悬停效果

html - 右 div 模糊了悬停效果

问题描述

在这个练习中，我很难为悬停设置样式。该效果未显示在物品卡的右侧。我的第一个想法是用填充进一步推动项目，但这根本不起作用。所以我尝试添加边距，它只会破坏我已经制作的设计。

如果你能帮助解决这个问题，我会很高兴。我被困住了。

.logo-image {
  vertical-align: middle;
  padding: 0px;
  display: table-cell;
}

.logo-image img {
  width: 100%;
}

.card {
  max-width: 300px;
  width: 220px;
  height: 300px;
  margin: auto;
  text-align: left;
  font-family: arial;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
  background-color: white;
}

.hvr-glow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}

.hvr-glow:hover,
.hvr-glow:focus,
.hvr-glow:active {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
<div class="row">
  <div class="col-sm-3">
    <a target="_blank" class="hvr-glow" href="/">
      <div class="logo-image">
        <div class="card">
          <img src="~/Content/Image/book1.jpg" style="width:100%">
          <p class="idname">Mình nói gì khi nói Hạnh phúc</p>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star-empty gold"></span>
          <span class="smallfont">(4)</span>
          <div>59.900 đ</div>
        </div>
      </div>
    </a>
  </div>

  <div class="col-sm-3">
    <a target="_blank" class="hvr-glow" href="/">
      <div class="logo-image">
        <div class="card">
          <img src="~/Content/Image/book2.jpg" style="width:100%">
          <p class="idname">Thay đổi cuộc sống với nhân số học</p>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star-empty gold"></span>
          <span class="smallfont">(1252)</span>
          <div>223.000 đ</div>
        </div>
      </div>
    </a>
  </div>

  <div class="col-sm-3">
    <a target="_blank" class="hvr-glow" href="/">
      <div class="logo-image">
        <div class="card ">
          <img src="~/Content/Image/book3.jpg" style="width:100%">
          <p class="idname">Sức mạnh của ngôn từ&lt;/p>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star-empty gold"></span>
          <span class="smallfont">(445)</span>
          <p>79.900 đ</p>
        </div>
      </div>
    </a>
  </div>

  <div class="col-sm-3">
    <a target="_blank" class="hvr-glow" href="/">
      <div class="logo-image">
        <div class="card ">
          <img src="~/Content/Image/book4.jpg" style="width:100%">
          <p class="idname">Tô Bình Yên Vẽ Hạnh Phúc</p>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star gold"></span>
          <span class="glyphicon glyphicon-star-empty gold"></span>
          <span class="smallfont">(1234)</span>
          <p>53.700 đ</p>
        </div>
      </div>
    </a>
  </div>

</div>

问题的图像

标签： htmlcss

解决方案

当z-index值小于相邻项时会出现此问题。您可以通过在事件上添加z-index:99（或其他一些值）来简单地解决它。.col-sm-3:hover

请看下面的代码：

.logo-image {
    vertical-align: middle;
    padding: 0px;
    display: table-cell;
}

.logo-image img {
    width: 100%;
}
    
.card {
    max-width: 300px;
    width: 220px;
    height:300px;
    margin: auto;
    text-align: left;
    font-family: arial;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: white;
}

.hvr-glow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
}
.hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.col-sm-3:hover{
    z-index: 999 !important; /*this part will solve the issue.*/
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="row">
    <div class="col-sm-3">
        <a target="_blank" class="hvr-glow" href="/">
            <div class="logo-image">
                <div class="card">
                    <img src="https://picsum.photos/200" style="width:100%">
                    <p class="idname">Mình nói gì khi nói Hạnh phúc</p>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star-empty gold"></span>
                    <span class="smallfont">(4)</span>
                    <div>59.900 đ</div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-sm-3">
        <a target="_blank" class="hvr-glow" href="/">
            <div class="logo-image">
                <div class="card">
                    <img src="https://picsum.photos/200" style="width:100%">
                    <p class="idname">Thay đổi cuộc sống với nhân số học</p>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star-empty gold"></span>
                    <span class="smallfont">(1252)</span>
                    <div>223.000 đ</div>
                </div>
            </div>
        </a>
    </div>

    <div class="col-sm-3">
        <a target="_blank" class="hvr-glow" href="/">
            <div class="logo-image">
                <div class="card ">
                    <img src="https://picsum.photos/200" style="width:100%">
                    <p class="idname">Sức mạnh của ngôn từ&lt;/p>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star-empty gold"></span>
                    <span class="smallfont">(445)</span>
                    <p>79.900 đ</p>
                </div>
            </div>
        </a>
    </div>

    <div class="col-sm-3">
        <a target="_blank" class="hvr-glow" href="/">
            <div class="logo-image">
                <div class="card ">
                    <img src="https://picsum.photos/200" style="width:100%">
                    <p class="idname">Tô Bình Yên Vẽ Hạnh Phúc</p>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star gold"></span>
                    <span class="glyphicon glyphicon-star-empty gold"></span>
                    <span class="smallfont">(1234)</span>
                    <p>53.700 đ</p>
                </div>
            </div>
        </a>
    </div>

</div>

</body>

推荐阅读