1

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

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

<!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();
    });
});

1 件の回答 1

1

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。