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

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

ただいまの
回答率

90.12%

マウスオーバー時に他要素も変化させたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,075

hanahana

score 9

画像とテキストを組み合わせてメニューボタンを作成したいと考えています。

・サンプル
http://www.nissay.co.jp/
「保険をご検討中のお客様」部分、右の4つの画像のようなメニューボタンです

・上は画像
・下は半透明の白帯があり、テキストと矢印(アイコンフォント使用)
・マウスオーバー時は画像が拡大&半透明の白帯の色が変更&アイコンフォントの矢印が5px分右に移動する
※アイコンフォントはhttp://ionicons.com/#cdnを使用しています

なんとか形になったのですが、メニューのうち、画像部分をマウスオーバーすると
画像は拡大しますが、白帯の色が変わりません。
白帯部分をマウスオーバーすると、白帯の色は変わりますが、画像は拡大しません。
隣接要素の「+」、兄弟要素の「>」を組み合わせるのだと思いますが、中々うまくできません。
どなたか、方法をご存知のかた、教えていただけないでしょうか。
よろしくお願いします。

<div class=“menu”>
<div class=“menu-1”>
<a href="#">
<img src="img.png" alt="">
<h1>メニュー<span class="ion-android-arrow-forward"></span></h1>
</a>
</div>
</div>
.menu-1
{overflow: hidden}

.menu img{
    width:100%;
    height:auto;
    vertical-align: bottom;
    -moz-transition: -moz-transform 0.5s linear;
        -webkit-transition: -webkit-transform 0.5s linear;
        -o-transition: -o-transform 0.5s linear;
        -ms-transition: -ms-transform 0.5s linear;
        transition: transform 0.5s linear}

.menu h1{
    font-size: 16px;
    margin-top: 10px;
    padding-left:10px;
    height:35px;
    padding-top: 5px;
    margin-bottom:0px;
text-align: left;
bottom:0;
color: #000000;
background-color: rgba(255,255,255,0.8);
position:absolute;
width:100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing: border-box}

.menu span{
color:#DC143C;
margin-left:5px;
font-size:14px}

.menu a{
    text-decoration: none;
position: relative;}

.menu h1:hover{
    background-color: #ffffff;
  }

.menu img:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+3

imghoverと考えるのではなく.menuhoverしたらと考えるといいと思います。

.menu img:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)}
 ↓
.menu:hover img{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)}


.menuの中にいくつか画像が入るのであれば.menuより子要素の.menu-1hoverとするといいと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/11/16 08:22

    ご回答ありがとうございます。

    教えていただいた方法で、実現することができました。
    本当にありがとうございました!

    キャンセル

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

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