SCSS/CSS 悬停在图像上

Question

我想将鼠标悬停在一个盒子上并变换图像的比例（1.1）。但问题是我的图像前面有文字。因此，如果我将鼠标悬停在文本上，它就不起作用

\n\n

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

\n\n

这是我的代码

\n\n

超文本标记语言

\n\n

<div class="col-md-12 club-index__box">\n   <a href="{{ path(\'toro_web_club_show\', {\'id\': r.id}) }}">\n      <div class="club-index__box--nation">\n         <div class="club-index__box--image">{{ toro_image(r.coverImage, \'1050x250\') }}</div>\n         <div class="club-index__box--text">\n            <span class="club-index__box--title">{{ r.name }}</span>\n            <span class="club-index__box--sub-title">\xe0\xb8\x97\xe0\xb8\xb5\xe0\xb8\xa1\xe0\xb8\x8a\xe0\xb8\xb2\xe0\xb8\x95\xe0\xb8\xb4\xe0\xb9\x84\xe0\xb8\x97\xe0\xb8\xa2 2016 , \xe0\xb8\x9c\xe0\xb8\xb9\xe0\xb9\x89\xe0\xb8\x88\xe0\xb8\xb1\xe0\xb8\x94\xe0\xb8\x81\xe0\xb8\xb2\xe0\xb8\xa3\xe0\xb8\x97\xe0\xb8\xb5\xe0\xb8\xa1 , \xe0\xb8\xa3\xe0\xb8\xb2\xe0\xb8\xa2\xe0\xb8\x8a\xe0\xb8\xb7\xe0\xb9\x88\xe0\xb8\xad\xe0\xb8\x9c\xe0\xb8\xb9\xe0\xb9\x89\xe0\xb9\x80\xe0\xb8\xa5\xe0\xb9\x88\xe0\xb8\x99</span>\n         </div>\n      </div>\n   </a>\n</div>\n

\n\n

社会保障体系

\n\n

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

\n

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;
           }