Question

我想将鼠标悬停在一个盒子上并转换图像的比例（1.1）。但问题是我在图像前面有一个文字。所以，如果我将鼠标悬停在文本上，那就不行了

我想将鼠标悬停在盒子的任何位置并缩放图像。

这是我的代码

HTML

<div class="col-md-12 club-index__box">
   <a href="{{ path('toro_web_club_show', {'id': r.id}) }}">
      <div class="club-index__box--nation">
         <div class="club-index__box--image">{{ toro_image(r.coverImage, '1050x250') }}</div>
         <div class="club-index__box--text">
            <span class="club-index__box--title">{{ r.name }}</span>
            <span class="club-index__box--sub-title">ทีมชาติไทย 2016 , ผู้จัดการทีม , รายชื่อผู้เล่น</span>
         </div>
      </div>
   </a>
</div>

SCSS

.club-index {
   &__box {
       margin-top: 30px;
       &--nation {
           position: relative;
           display: block;
           width: 100%;
           height: 250px;
           margin: 0 auto;
           background-color: #18202d;
           text-align: center;
           overflow: hidden;
       }
       &--image {
           position: absolute;
           transition: all 1s ease-in-out 0s;
           -moz-transition: all 1s ease-in-out 0s;
           -webkit-transition: all 1s ease-in-out 0s;
           -o-transition: all 1s ease-in-out 0s;
           &:hover {
               transform: scale(1.1);
               -moz-transform: scale(1.1);
               -webkit-transform: scale(1.1);
               -o-transform: scale(1.1);
           }
       }
       &--text {
           position: relative;
           z-index: 1;
       }
       &--title {
           padding-top: 75px;
           font-size: 30px;
           color: #fff;
           text-align: center;
           &:hover{
               transform: scale(1.1);
               -moz-transform: scale(1.1);
               -webkit-transform: scale(1.1);
               -o-transform: scale(1.1);
           }
       }
       &--sub-title {
           margin-top: 20px;
           font-size: 16px;
           color: #fff;
           text-align: center;
           &:hover{
               transform: scale(1.1);
               -moz-transform: scale(1.1);
               -webkit-transform: scale(1.1);
               -o-transform: scale(1.1);}}}}
           }
       }
   }
}

Answer 1

而不是在图像悬停时缩放图像缩放图像悬停在其父元素上，包括图像和文本

 &--nation:hover > image {
          //scale to 1.1
 }

编辑：你的代码就像

    .club-index {
       &__box {
           margin-top: 30px;
           &--nation {
               position: relative;
               display: block;
               width: 100%;
               height: 250px;
               margin: 0 auto;
               background-color: #18202d;
               text-align: center;
               overflow: hidden;

           }
           &--nation:hover > &--image {
                   transform: scale(1.1);
                   -moz-transform: scale(1.1);
                   -webkit-transform: scale(1.1);
                   -o-transform: scale(1.1);
               }
           &--image {
               position: absolute;
               transition: all 1s ease-in-out 0s;
               -moz-transition: all 1s ease-in-out 0s;
               -webkit-transition: all 1s ease-in-out 0s;
               -o-transition: all 1s ease-in-out 0s;
           }

SCSS / CSS悬停在图像上

1 个答案: