hover時の処理が適応されない

swiper-slideクラスにhover時background-colorを指定しているのですが、処理が適応されません。無反応です。

どなたかご回答いただければ幸いです。

コードは以下の通りです。

html
1  <!-- results -->
2  <section class="results">
3    <h2 class="title white">Results</h2>
4    <!-- カルーセル -->
5    <div class="swiper-container">
6      <ul class="swiper-wrapper">
7        <li class="swiper-slide">
8          <a href="" class="results-item">
9            <figure>
10              <img src="img/slide1.png" alt="">
11            </figure>
12            <div class="results-text">
13              <h3>とかくに人の世は住みにくい。</h3>
14              <p>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</p>
15            </div>
16          </a>
17        </li>
18        <!-- li*6 -->
19      </ul>
20    </div>
21    <div class="results-pagination"></div>
22    <!-- end カルーセル -->
23    <a href="" class="btn">VIEW ALL</a>
24  </section>

scss
1  .swiper-container {
2    .swiper-wrapper {
3      .swiper-slide {
4        width: 422px;
5        margin-right: 40px;
6        transition: background-color 3s;
7        &:hover {
8          background-color: rgba(62, 62, 62, .7); //ここです。
9        }
10        .results-item { 
11          figure {
12            display: block;
13            margin: 0;
14            img {
15              width: 100%;
16              vertical-align: bottom;
17            }
18          }
19          .results-text {
20            background-color: #fff;
21            color: #3e3e3e;
22            padding: 17px 20px 20px;
23            h3 {
24              font-size: 2rem;
25              font-weight: bold;
26            }
27            p {
28              margin-top: 18px;
29              font-size: 1.6rem;
30              line-height: 1.5;
31              text-align: justify;
32            }
33          }
34        }
35      }
36    }
37  }
38  .results-pagination {
39    margin: 52px 0 0 -5px;
40    .swiper-pagination-bullet {
41      background-color: #fff;
42      width: 12px;
43      height: 12px;
44      border-radius: 50%;
45      margin: 0 10px;
46      opacity: 1;
47      position: relative;
48      &:focus {
49        outline: none;
50      }
51      &.swiper-pagination-bullet-active {
52        &::after {
53          content: "";
54          width: 20px;
55          height: 20px;
56          border: 1px solid #fff;
57          display: inline-block;
58          border-radius: 50%;
59          position: absolute;
60          top: 50%;
61          left: 50%;
62          transform: translate(-50%, -50%);
63        }
64      }
65    }
66  }
67}

Lhankor_Mhy

2020/05/17 01:53

ご提示のコードを試してみましたが、当方の環境では問題なく背景色が変化しました。（ご提示のSCSSはエラーを起こすので不要の部分を削除しています）ですので、ご質問の「無反応です」という問題は再現しません。 NDvP2OWLAoccEfQさんの環境では、↓以下のページでも同様に問題が再現しますか？ https://jsfiddle.net/Lhankor_Mhy/cv92z3n0/