

文字枠をホバーすると対応して画像が切り替わるのですが、SP画面の一番上（ノーズワイヤー）のところだけデフォルトの画像が重なります。枠の真ん中だと大丈夫なのですが、上辺に近づくと枠がブルブルゆれたり、デフォルトの画像と重なったりします。PCは大丈夫です。

jqueryはSPとPCで書き分けたりしていないので、CSSなのかなと思うのですが見つけられずにいます。お力をいただければと思います。よろしくお願いします。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
        <!-- Basic Page Needs
      ---------------------------------------------------->
        <meta charset="utf-8">
        <title>MASCODE FEATURE</title>
    
        <!-- Mobile Specific Metas
      --------------------------------------------------->
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- CSS
    ---------------------------------------------------->
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/feature.css">
    
        <!-- jQuery
      ---------------------------------------------------->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="js/index.js"></script>
    </head>
    
    <body>
    
        <div class="mask">
            <img src="./img/FEATURE/pc/mask_img1.png" alt="mask" class="mask_0 mask_img">
            <img src="./img/FEATURE/pc/mask_1.png" alt="mask" class="mask_1 mask_img">
            <img src="./img/FEATURE/pc/mask_2.png" alt="mask" class="mask_2 mask_img">
            <img src="./img/FEATURE/pc/mask_2.png" alt="mask" class="mask_3 mask_img">
            <img src="./img/FEATURE/pc/mask_2.png" alt="mask" class="mask_4 mask_img">
            <img src="./img/FEATURE/pc/short_Arrow1.png" alt="mask" class="mask_5 mask_img">
            <img src="./img/FEATURE/pc/long_Arrow.png" alt="mask" class="mask_6 mask_img">
            <img src="./img/FEATURE/pc/short_Arrow2.png" alt="mask" class="mask_7 mask_img">
        
            <img src="img/FEATURE/nosewire.png" alt="" class="image_0"> 
            <img src="img/FEATURE/variation.png" alt="" class="image_01"> 
            <img src="img/FEATURE/softfilter.png" alt="" class="image_02"> 
            <img src="img/FEATURE/strings.png" alt="" class="image_03"> 
            <img src="img/FEATURE/nonwoven.png" alt="" class="image_04"> 
            
        </div>
    
        <section class="feature">
            <ul class="feature_list">
                <li class="list_item item_0">
                    <p class="text_top">ノーズワイヤー</p>
                    <p class="text_bottom">鼻から頬周り全方位フィット</p>
                </li>
                <li class="list_item item_01">
                    <p class="text_top">豊富なバリエーション</p>
                    <p class="text_bottom">様々なシチュエーションで選べる</p>
                </li>
                <li class="list_item item_02">
                    <p class="text_top">ソフトフィルター</p>
                    <p class="text_bottom">肌ざわりがやさしい</p>
                </li>
            </ul>
            <ul class="feature_list">
                <li class="list_item_02 item_03">
                    <p class="text_top">柔らかく平らなゴム紐</p>
                    <p class="text_bottom">長時間の使用でも耳が痛くなりにくい</p>
                </li>
                <li class="list_item_02 item_04">
                    <p class="text_top">高感度フィルターの不織布</p>
                    <p class="text_bottom text_bottom_sp">花粉／ウイルス飛沫／PM2.5／黄砂　99％カット*</p>
                </li>
            </ul>
    
            <ul class="feature_notes">
                <li class="note">＊PFE：平均99％（約0.1μm微小粒子捕集効率試験）※1</li>
                <li class="note">＊BFE：平均99％（バクテリア飛沫捕集効率試験）※1</li>
                <li class="note">＊VFE：平均99％（ウイルス飛沫捕集効率試験）※1</li>
                <li class="note">※1試験機関：米国ネルソン研究所</li>
            </ul>
            <p class="caution">※マスクは感染（侵入）を完全に防ぐものではありません。</p>
        </section>
    
        <div class="scroll scroll_sp">
        </div>
    
        <section class="color">
            <p class="color_text">チークのように血色感を良く見せる<br class="s_block">肌なじみの良いカラーで、<br>まるでメイクをしているような華やかさや<br class="s_block">明るい印象を引き出すカラーシリーズ。<br>なりたいイメージに合わせて選ぶことが可能。</p>
            <div class="color_list pc_img">
                <img src="./img/top/pc/M_img.jpg" alt="Msize" class="pc_img">
                <img src="./img/top/pc/M_img.jpg" alt="Msize" class="pc_img">
                <img src="./img/top/pc/M_img.jpg" alt="Msize" class="pc_img">
            </div>
            <div class="color_list sp_img">
                <img src="./img/top/sp/M_img_sp.jpg" alt="Msize" class="sp_img">
                <img src="./img/top/sp/M_img_sp.jpg" alt="Msize" class="sp_img">
                <img src="./img/top/sp/M_img_sp.jpg" alt="Msize" class="sp_img">
            </div>
        </section>
    
        <footer>
            <div class="container">
                <div class="footer_flex">
                    <a href="#" class="footer_logo"><img src="./img/top/footer_logo.png" alt="mascode"></a>
                    <div class="footer_pc">
                        <div class="footer_link">
                            <ul class="link_box">
                                <li class="link_item"><a href="#">INSTAGRAM</a></li>
                                <li class="link_item"><a href="#">FACEBOOK</a></li>
                                <li class="link_item"><a href="#">TWITTER</a></li>
                            </ul>
    
                            <ul class="link_box">
                                <li class="link_item"><a href="#">CONTACT US</a></li>
                                <li class="link_item"><a href="#">COMPANY</a></li>
                            </ul>
    
                            <ul class="link_box">
                                <li class="link_item"><a href="#">PRIVACY POLICY</a></li>
                                <li class="link_item"><a href="#">特定商取引法</a></li>
                            </ul>
                        </div>
                    </div>
    
                    <div class="footer_sp">
                        <div class="footer_link">
                            <ul class="link_box">
                                <li class="link_item"><a href="#">CONTACT US</a></li>
                                <li class="link_item"><a href="#">COMPANY</a></li>
                                <li class="link_item"><a href="#">PRIVACY POLICY</a></li>
                                <li class="link_item"><a href="#">特定商取引法</a></li>
                            </ul>
                            <ul class="link_box">
                                <li class="link_item"><a href="#">INSTAGRAM</a></li>
                                <li class="link_item"><a href="#">FACEBOOK</a></li>
                                <li class="link_item"><a href="#">TWITTER</a></li>
                            </ul>
                        </div>
                    </div>
    
                </div>
                <small>COPYRIGHT &copy;  ALL RIGHTS RESERVED.</small>
            </div>
        </footer>
    
    </body>
    
    </html>
    
    
    @charset "UTF-8";
    .container {
      margin: 0 auto;
      max-width: 1200px;
    }
    
    @media screen and (max-width: 767px) {
      .container {
        max-width: 540px;
      }
    }
    
    @media screen and (max-width: 991px) {
      .container {
        max-width: 720px;
      }
    }
    
    @media screen and (max-width: 1199px) {
      .container {
        max-width: 960px;
      }
    }
    
    /****************************************
    
        Custom
    
    *****************************************/
    body {
      color: #000;
      font-family: "Helvetica Neue", "sans-serif";
      font-size: 12px;
      font-size: 0.75rem;
      line-height: 14px;
      background-color: #fff;
      position: relative;
      overflow: hidden;
    }
    
    a:active,
    a:hover,
    a:link,
    a:visited {
      color: #313131;
    }
    
    a:hover {
      opacity: 0.7;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }
    
    .fadein {
      opacity: 0;
      -webkit-transition: all 2s;
      transition: all 2s;
    }
    
    .fadein.active {
      opacity: 1;
    }
    
    
    /****************************************
            FEATURE page
    *****************************************/
    
    .mask {
      margin-top: 180px;
      margin-bottom: 135px;
      margin-right: auto;
      margin-left: auto;
      height: 300px;
      width: 960px;
      position: relative;
    }
    
    .mask .mask_0 {
      display: inline-block;
      opacity: 0;
      width: 195px;
      position: absolute;
      top: -10%;
      left: 0;
    }
    
    .mask .mask_1 {
      display: inline-block;
      opacity: 0;
      width: 320px;
      z-index: 1;
      position: absolute;
      top: 0;
      left: 16%;
    }
    
    .mask .mask_2 {
      display: inline-block;
      opacity: 0;
      width: 187px;
      z-index: -2;
      position: absolute;
      top: 0;
      left: 33%;
    }
    
    .mask .mask_3 {
      display: inline-block;
      opacity: 0;
      width: 187px;
      z-index: -3;
      position: absolute;
      top: 0;
      left: 45%;
    }
    
    .mask .mask_4 {
      display: inline-block;
      opacity: 0;
      width: 187px;
      z-index: -4;
      position: absolute;
      top: 0;
      left: 57%;
    }
    
    .mask .mask_5 {
      display: inline-block;
      opacity: 0;
      width: 91px;
      z-index: -5;
      position: absolute;
      top: 8%;
      left: 67%;
    }
    
    .mask .mask_6 {
      display: inline-block;
      opacity: 0;
      width: 650px;
      z-index: -5;
      position: absolute;
      top: 0;
      right: 15%;
    }
    
    .mask .mask_7 {
      display: inline-block;
      opacity: 0;
      width: 85px;
      z-index: -5;
      position: absolute;
      top: 20%;
      left: 76%;
    }
    
    .mask .mask_0.active {
      -webkit-animation: mask 1.5s ease;
              animation: mask 1.5s ease;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
    }
    
    .mask .mask_1.active {
      -webkit-animation: mask 1.5s ease .3s;
              animation: mask 1.5s ease .3s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
    }
    
    .mask .mask_2.active {
      -webkit-animation: mask 1.5s ease .5s;
              animation: mask 1.5s ease .5s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
    }
    
    .mask .mask_3.active {
      -webkit-animation: mask 1.5s ease .7s;
              animation: mask 1.5s ease .7s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
    }
    
    .mask .mask_4.active {
      -webkit-animation: mask 1.5s ease .9s;
              animation: mask 1.5s ease .9s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
    }
    
    .mask .mask_5.active {
      -webkit-animation: mask_02 1.5s ease 1.5s;
              animation: mask_02 1.5s ease 1.5s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
    }
    
    .mask .mask_6.active {
      -webkit-animation: mask_02 1.5s ease 1.5s;
              animation: mask_02 1.5s ease 1.5s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
    }
    
    .mask .mask_7.active {
      -webkit-animation: mask_02 1.5s ease 1.5s;
              animation: mask_02 1.5s ease 1.5s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
    }
    
    @-webkit-keyframes mask {
      from {
        opacity: 0;
        -webkit-transform: translateX(30px);
                transform: translateX(30px);
      }
      to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
      }
    }
    
    @keyframes mask {
      from {
        opacity: 0;
        -webkit-transform: translateX(30px);
                transform: translateX(30px);
      }
      to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
      }
    }
    
    @-webkit-keyframes mask_02 {
      from {
        opacity: 0;
        -webkit-transform: translateX(-30px);
                transform: translateX(-30px);
      }
      to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
      }
    }
    
    @keyframes mask_02 {
      from {
        opacity: 0;
        -webkit-transform: translateX(-30px);
                transform: translateX(-30px);
      }
      to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
      }
    }
    
    @media screen and (max-width: 991px) {
      .mask {
        width: 760px;
      }
      .mask .mask_0 {
        left: -8%;
      }
      .mask .mask_1 {
        left: 12%;
      }
      .mask .mask_3 {
        left: 47%;
      }
      .mask .mask_4 {
        left: 59%;
      }
      .mask .mask_6 {
        right: 10%;
      }
      .mask .mask_7 {
        left: 78%;
      }
    }
    
    @media screen and (max-width: 767px) {
      .mask {
        margin-top: 15.6vw;
        margin-bottom: 14.3vw;
        height: 39vw;
        width: 100%;
      }
      .mask .mask_0 {
        width: 25.4vw;
        top: -5%;
        left: -5%;
      }
      .mask .mask_1 {
        width: 41.7vw;
        left: 14%;
      }
      .mask .mask_2 {
        width: 24.4vw;
        left: 35%;
      }
      .mask .mask_3 {
        width: 24.4vw;
        left: 47%;
      }
      .mask .mask_4 {
        width: 24.4vw;
        left: 59%;
      }
      .mask .mask_5 {
        width: 11.9vw;
        top: 2%;
        left: 70%;
      }
      .mask .mask_6 {
        width: 84.7vw;
        top: 0;
        right: 8%;
      }
      .mask .mask_7 {
        width: 11vw;
        top: 16%;
        left: 81%;
      }
    }
    
    @media screen and (max-width: 575px) {
      .mask .mask_7 {
        top: 11%;
      }
    }
    
    .image_0,
    .image_01,
    .image_02,
    .image_03,
    .image_04 {
      height: 400px;
      -o-object-fit: contain;
         object-fit: contain;
      position: absolute;
      top: -60px;
      left: -4%;
      display: none;
    }
    
    .feature {
      margin-top: 85px;
      margin-bottom: 135px;
      margin-right: auto;
      margin-left: auto;
      text-align: center;
    }
    
    .feature_list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      margin-bottom: 21px;
    }
    
    .feature_list .list_item, .feature_list .list_item_02 {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      max-width: 225px;
      height: auto;
      border: 1px solid #707070;
      padding: 20px;
      margin-right: 37px;
      line-height: 1.0;
      font-size: 12px;
      font-size: 0.75rem;
    }
    
    .feature_list .list_item:first-child, .feature_list .list_item_02:first-child {
      border: 1px solid #707070;
    }
    
    .feature_list .list_item:first-child:hover, .feature_list .list_item_02:first-child:hover {
      border: 4px solid #707070;
    }
    
    .feature_list .list_item:last-child, .feature_list .list_item_02:last-child {
      margin-right: 0;
    }
    
    .feature_list .list_item .text_top, .feature_list .list_item_02 .text_top {
      padding-bottom: 18px;
      border-bottom: 1px solid #000;
    }
    
    .feature_list .list_item .text_bottom, .feature_list .list_item_02 .text_bottom {
      padding-top: 20px;
    }
    
    .feature_list .list_item_02 {
      max-width: 357px;
    }
    
    .feature_list .list_item_02:first-child {
      border: 1px solid #707070;
    }
    
    .feature_list .list_item_02:last-child {
      margin-right: 0;
    }
    
    .feature .list_item:hover, .feature .feature_list .list_item_02:hover, .feature_list .feature .list_item_02:hover,
    .feature .list_item_02:hover {
      border: 4px solid #707070;
    }
    
    .feature_notes {
      margin-bottom: 30px;
      padding: 0 20px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
    
    .feature_notes .note {
      padding-bottom: 10px;
      padding-right: 20px;
      font-size: 10px;
      font-size: 0.625rem;
    }
    
    .feature_notes .note:last-child {
      padding-right: 0;
    }
    
    .feature .caution {
      font-size: 13px;
      font-size: 0.8125rem;
    }
    
    @media screen and (max-width: 767px) {
      .feature {
        margin-top: 65px;
        margin-bottom: 100px;
      }
      .feature_list {
        display: block;
      }
      .feature_list .list_item, .feature_list .list_item_02 {
        margin-right: auto;
        margin-left: auto;
        width: 85%;
        max-width: 580px;
        height: auto;
        border: 1px solid #707070;
        padding: 20px;
        margin-bottom: 18px;
        line-height: 1.0;
        font-size: 22px;
        font-size: 1.375rem;
      }
      .feature_list .list_item:last-child, .feature_list .list_item_02:last-child {
        margin-right: auto;
      }
      .feature_list .list_item .text_top, .feature_list .list_item_02 .text_top {
        padding-bottom: 10px;
        border-bottom: 2px solid #707070;
      }
      .feature_list .list_item .text_bottom, .feature_list .list_item_02 .text_bottom {
        padding-top: 12px;
      }
      .feature_list .list_item_02:first-child {
        border: 1px solid #707070;
      }
      .feature_list .list_item_02 .text_bottom_sp {
        font-size: 21px;
        font-size: 1.3125rem;
        letter-spacing: -2px;
      }
      .feature_notes {
        width: 95%;
        max-width: 580px;
        margin-bottom: 62px;
        display: block;
        margin-left: 8%;
        text-align: left;
      }
      .feature_notes .note {
        padding-bottom: 10px;
        padding-right: 0;
        font-size: 2.61vw;
        line-height: 1.2;
      }
      .feature .caution {
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 1.1;
        padding: 0 30px;
      }
    }
    
    @media screen and (max-width: 575px) {
      .feature_list .list_item, .feature_list .list_item_02 {
        font-size: 3.82vw;
      }
      .feature_list .list_item_02 .text_bottom_sp {
        font-size: 3.65vw;
      }
      .feature .caution {
        font-size: 2.8vw;
      }
    }
    
    .scroll_sp {
      display: none;
    }
    
    @media screen and (max-width: 767px) {
      .scroll_sp {
        display: block;
      }
    }
    
    .color {
      margin-bottom: 235px;
      text-align: center;
    }
    
    .color_text {
      font-size: 13px;
      font-size: 0.8125rem;
      line-height: 2.69;
      letter-spacing: 0.65px;
      margin-bottom: 97px;
    }
    
    .color_list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
    
    .color_list img {
      max-width: 300px;
      padding-right: 5px;
    }
    
    .color_list img:last-child {
      padding-right: 0;
    }
    
    .color .s_block {
      display: none;
    }
    
    .color .sp_img {
      display: none;
    }
    
    @media screen and (max-width: 767px) {
      .color {
        margin-bottom: 162px;
      }
      .color .sp_img {
        display: block;
      }
      .color .pc_img {
        display: none;
      }
      .color_text {
        font-size: 26px;
        font-size: 1.625rem;
        letter-spacing: 1.3px;
        line-height: 2.5;
        margin-bottom: 12.6vw;
      }
      .color_list {
        display: block;
      }
      .color_list img {
        margin-right: auto;
        margin-left: auto;
        max-width: 630px;
        padding-right: 0;
        width: 85%;
      }
      .color .s_block {
        display: block;
      }
    }
    
    @media screen and (max-width: 620px) {
      .color_text {
        font-size: 4.2vw;
      }
    }
    
    
    // feature
    $(function () {
        $('.item_0').hover(function () {
            $('.mask_img').hide();
            $('.image_0').fadeIn();
        }, function () {
            $('.mask_img').show();
            $('.image_0').hide();
        });
        $('.item_01').hover(function () {
            $('.mask_img').hide();
            $('.image_01').fadeIn();
        }, function () {
            $('.mask_img').show();
            $('.image_01').hide();
        });
        $('.item_02').hover(function () {
            $('.mask_img').hide();
            $('.image_02').fadeIn();
        }, function () {
            $('.mask_img').show();
            $('.image_02').hide();
        });
        $('.item_03').hover(function () {
            $('.mask_img').hide();
            $('.image_03').fadeIn();
        }, function () {
            $('.mask_img').show();
            $('.image_03').hide();
        });
        $('.item_04').hover(function () {
            $('.mask_img').hide();
            $('.image_04').fadeIn();
        }, function () {
            $('.mask_img').show();
            $('.image_04').hide();
        });
    });
    
[/code]


CC BY-SA 4.0
2021-09-06T14:11:58.667
82295
2021-09-08T06:19:27.917
2021-09-07T00:09:39.717
3060
48054
question
html jquery css
ホバーでの画面のゆれと画像の重なりをなくしたい


すみません、２つの画像のサイズと位置が重なっているだけでした。調整したら直りました。


CC BY-SA 4.0
2021-09-08T06:19:27.917
82338
2021-09-08T06:19:27.917
48054
82295
answer