質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.20%

画像にマウスが乗ったとき表示を変えたいです

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,302

ryuji000

score 19

前提・実現したいこと

現状はこのマウスが乗る前はこのようになり
イメージ説明
マウスが乗ると画像の様に背景が真っ白になってしまいます。
イメージ説明
マウスが乗ったときどのようにしたいかというとこの下の画像のようにしたいです。
イメージ説明

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="apple-touch-icon" href="icon/logo.jpg">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/normalize.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <title>lanugo</title>
</head>
<body>
    <header>
        <div class="header__wrap flex">
            <a href="">
                <div class="header__left">
                    <div class="header__logo">
                        <img src="img/logo.jpg">
                    </div>
                    </div>
            </a>    
            <nav class="nav">
                <ul class="nav__gNav flex">
                    <li><a href="">menu</a></li>
                    <li><a href="">news</a></li>
                    <li><a href="">concept</a></li>
                    <li><a href="">access</a></li>
                    <li><a href="">contact</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="mainVisual">
        <div class="concept">
            <img src="img/concept.png">
        </div>
    </div>
    <div class="main">
        <div>
        <img src="img/main_content.png" class="main__img">
            <div class="main__item--1">
                <div class="main__item--text">
                    心から「きれいに」「かわいく」したいと思っているため、すべての施術にはオススメのトリートメントと前処理と後処理を無料で含めさせて頂きます。
                </div>
            </div>
            <div class="main__item--2">
                <div class="main__item--text">
                    <p>お客さまと信頼しあえる関係性で一緒に都市を重ねていきたいという思いから、わかりやすい料金メニューにしています。施術に追加でオプションがつくことはありません。</p>
                </div>
            </div>
            <div class="main__item--3">
                <div class="main__item--text">
                    <p>丁寧な施術ができるように一対一で施術をおこなえるようにしております。丁寧な施術をおこないます。</p>
                </div>
            </div>
            <div class="main__item--4">
                <div class="main__item--text">
                    <p>LINE@を使ったスタイリングのアドバイスや髪のケアなど、お家に帰った後のご相談もきがるにできます。</p>
                </div>
            </div>
            <div class="main__item--5">
                <div class="main__item--text">
                    <p>アットホームな空間をご用意させてもらうことで、スタイルやケア、その他のこともお客さまから伝えやすくなる工夫をしています。</p>
                </div>
            </div>
            <div class="main__item--6">
                <div class="main__item--text">
                    <p>最新のトレンドのスタイルを取り入れながら、お客さまに似合う髪型を提案します。小顔矯正立体カットの資格を持ち、骨格や肩幅から似合せを提供します。</p>
                </div>
            </div>
        </div>
    </div>
    <div class="information flex">
        <div class="information__left">
            <div class="information__text">
                <p>営業日 : 火曜日~日曜日(金曜日のみ20:00まで)</p>
                <p>営業時間 : 11:00~19:00</p>
                <p>住所 : 和歌山市12番町15島ビル 2F</p>
                <p>TEL : 0734-88-2668</p>    
        <div class="facebook">
            <div id="pagePlugin">
                <div class="fb-page" data-href="https://www.facebook.com/Hairlifedesign-lanugo-1426322340740357/" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/Hairlifedesign-lanugo-1426322340740357/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/Hairlifedesign-lanugo-1426322340740357/">Hair&amp;lifedesign lanugo</a></blockquote>
                </div>
            </div>    
            </div>
        </div>
    </div>
    <div class="information__right">
        <img src="img/information1.png">
        <img src="img/information2.png">
    </div>
</div>
<div class="instagram">
    <iframe src="https://snapwidget.com/embed/423101" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; height:200px"></iframe>
</div>

<div id="fb-root"></div>

<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10&appId=1881778235415743";
        fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
body {
    letter-spacing: .1em;
    line-height: 1.5em;
    font-size: 62.5%;
    font-weight: 200;
    font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
}
header {
    width: 100%;
    position: fixed;
    z-index: 10000;
    background-color: #fff;
}
.flex{
    display: flex;
}
.header__logo {
    margin: 0 50px;   
}
.header__wrap {
    margin: 0 auto;
    padding: 15px 0;
    position: relative;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}
.nav__gNav li {
    margin: 0 10px;
    padding: 1px 4px;
    font-size: 2.5rem;
    color: #4d4d4d;
}
.mainVisual {
    background-image: url(../img/main.jpg);
    width: 100%;
    height: 650px;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.concept {
    width: 900px;
    top: 490px;
    bottom: 0;
    left: 100px;
    right: 0;
    position: absolute;
    margin: 0 auto;
}
.main {
    height: 100vh;
    width: 1200px;
    margin: 410px auto 0;
    position: relative;
}
.main__img {
    position: absolute;
    top: 170px;
    left: 230px;
    z-index: 100;
}
/*マウスが乗った*/
.main__item--1{
    background-image: url(../img/mainitem1.png);
    width: 300px;
    height: 295px;
    position: absolute;
    top: -79px;
    left: 43px;
    z-index: 1;
}
.main__item--1:hover {
    background-image: url(../img/mainitemh1.png);
    background-repeat: no-repeat;
}
.main__item--2{
    background-image: url(../img/mainitem2.png);
    width: 220px;
    height: 275px;
    position: absolute;
    top: 34px;
    left: 731px;
    z-index: 1;
}
.main__item--2:hover {
    background-image: url(../img/mainitemh2.png);
    background-repeat: no-repeat;
}
.main__item--3{
    background-image: url(../img/mainitem3.png);
    width: 205px;
    height: 200px;
    position: absolute;
    top: 247px;
    left: 268px;
    z-index: 1;
}
.main__item--3:hover {
    background-image: url(../img/mainitemh3.png);
    background-repeat: no-repeat;
}
.main__item--4{
    background-image: url(../img/mainitem4.png);
    width: 215px;
    height: 215px;
    position: absolute;
    top: 360px;
    left: 523px;
    z-index: 1;
}
.main__item--4:hover {
    background-image: url(../img/mainitemh4.png);
    background-repeat: no-repeat;
}
.main__item--5{
    background-image: url(../img/mainitem5.png);
    width: 234px;
    height: 234px;
    position: absolute;
    top: 581px;
    left: 784px;
    z-index: 1;
}
.main__item--5:hover {
    background-image: url(../img/mainitemh5.png);
    background-repeat: no-repeat;
}
.main__item--6{
    background-image: url(../img/mainitem6.png);
    width: 330px;
    height: 245px;
    position: absolute;
    top: 617px;
    left: 191px;
    z-index: 1;
}
.main__item--6:hover {
    background-image: url(../img/mainitemh6.png);
    background-repeat: no-repeat;
}
.information {
    width: 1200px;
    margin: 340px auto 0;
    justify-content: space-around;
    color: #666;
}
.information__text {
    margin-left: 30px;
}
.information__text p {
    margin-top: 7px;
    font-size: 2rem;
    letter-spacing: 5px;
}
.information__text p:nth-of-type(3) {
    margin-top: 40px;
}
.information__right img:last-child {
    margin-top: 30px;
}
.facebook {
    margin-top: 30px; 
}
.instagram {
    margin-top: 50px;
    width: 100%;

}
.main__item--text {
    width:          100%;
    height:         100%;
    opacity:        0;  /* マスクを表示しない */
    -webkit-transition: all 0.2s ease;
    transition:     all 0.2s ease;
}
.main__item--text:hover {
    opacity: 1; /* マスクを表示する */
    padding-top: 110px;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+1

現在はどのような症状なのでしょうか?ご提示のクラス名は間違いでは無いしょうか?(「main__item--1」「~--2」)不明なので、何とも言えませんが、マスクとして<div class="main__item--text">を設定する場合だと思いますが、マウスのON・OFFともopacity: 0;になっているので

.main__item--text:hover {
    opacity: 1;  /* マスクを表示する */
}

ではどうでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/15 09:22

    書き直したらいけました。
    丁寧な説明ありがとうございます。
    長い時間付き合っていただきありがとうございます。
    また何かありましたらぜひお願いします。

    キャンセル

  • 2017/08/15 09:56

    こちらこそ、途中早合点でスミマセン。「kei344」さんのご提案にあるように「.main__item--1:hover」部分は本来要りません。あっても正しく設定されていれば問題無いのですが、今回みたいにエラー原因の一つになる可能性があります。余分なコードを無くし軽量化を計るのも今後の課題にされると良いかもです。

    キャンセル

  • 2017/08/15 11:22

    ほんとうに丁寧に教えていただきありがとうございます。

    キャンセル

0

画像にマウスが乗ったとき表示を変えたい

⇒パッと思いついた内容です。

案1)画像を2つ用意して、CSSのマウスオーバーで画像を切り替える。

案2)<p>タグにクラス追加し、javascriptのマウスオーバーでテキストの表示・非表示を切り替える。

案3)CSSのマウスオーバーで画像のz-indexを変更して、(画像の位置を手前と奥にして、)文字を表示・非表示にする。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/13 10:10

    回答ありがとうございます
    試してみます

    キャンセル

0

提示されているコードを生かすなら、以下でどうでしょう。

.main__item--text:hover {
    opacity: 1; /* マスクを表示する */
    padding-top: 110px; /* ホバーで下にずらす */
}


ホバーでずらす値は、適宜変更してください。

参考まで。

追記

<div class="main__item--1">
<div class="xxx"><!--追記-->
    <div class="main__item--text">
    <p>心から「きれいに」「かわいく」したいと思っているため、すべての施術にはオススメのトリートメントと前処理と後処理を無料で含めさせて頂きます。</p>
    </div>
</div><!--追記-->
</div>


(以下のコードだと画像が透過されていないようなので)

.main__item--1:hover {
    background-image: url(../img/mainitemh1.png);
}


このコードを以下に差し替えと追加

.xxx {
    height: 295px; /*表示させている画像の高さ*/
    opacity: 0;
    background-image: url(../img/mainitemh1.png); /*重ねる画像のURL*/
}
.xxx:hover {
    opacity: 1;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/13 14:59

    この場合背景の色がすべてグレーになってしまい真ん中の画像のように表示されないのですがどうすればいいでしょう?

    キャンセル

  • 2017/08/13 15:03 編集

    .main__item--1:hover {
    background-image: url(../img/mainitemh1.png);
    }
    ここがもと画像と一緒だからではないですか?
    すいません。画像一緒でも表示できますね。わたしの環境ではどちらでも大丈夫です。
    うーん、なぜでしょう。
    なにか、他にコードがありませんか?

    キャンセル

  • 2017/08/13 15:09

    画像問題だったのですが一つだけにしたら次は背景の色が真っ白になってしまいました

    キャンセル

  • 2017/08/13 18:49

    とくには見つからなかったですね

    キャンセル

0

動くサンプル:https://jsfiddle.net/9x8gkgw7/


回答時に書かれているコードで問題なく動くように見えます。他のスタイルがあたっているかや、画像自体が透過しているかどうかなど確認されてはいかがでしょうか。
また、CSSは部分ではなく全体を提示されたほうがよいとおもいます。

【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説:デベロッパーツールの使い方:Google Chrome版Firebug:デベロッパーツール取扱説明書|gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/14 23:15

    全体書き加えました。
    説明が下手ですみません。

    キャンセル

  • 2017/08/15 04:31

    https://jsfiddle.net/9x8gkgw7/1/
    動いていますよ。

    キャンセル

  • 2017/08/15 07:18

    自分の方では背景に白がかかってしまうのですが

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.20%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる