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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

6402閲覧

cssでのbackground-imageでhover後画像のロールオーバーのバグの対処

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/08/22 09:43

編集2016/12/17 01:36

解決させたい事は、cssでマウスオーバーで、画像を切り替えるシンプルな記述なのですが、
safariのみ、マウスオーバーすると画像が一瞬、小さく表示されてしまいます。

chrome、firefoxでは、問題ありませんでした。

ご教授頂けますと幸いです。

テストサイトになります。

トップページの動画の上に配置しております円の画像の箇所になります。

p.index-img1 a, p.index-img2 a { z-index: 2; position: absolute; text-indent: 100%; white-space: nowrap; overflow: hidden; } p.index-img1 a { right: 10%; top: 20%; background: url("images/top_m_icon.svg") no-repeat 50% 50%; background-size: 100%; width: 300px; height: 300px; display: block; margin: 0 auto; -webkit-transition: all 500ms ease-out; transition: all 500ms ease-out; } p.index-img1 a:hover { right: 10%; top: 20%; background: url("images/index_m_icon_on.svg") no-repeat 50% 50%; background-size: 100%; width: 300px; height: 300px; }

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

transitionのallをwidthに変更することにより、解決いたしました。

ご回答いただきました方、誠にありがとうございました。

投稿2016/08/23 08:31

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

サファリが入っていなかった為、今DLして入れて確認したのですが
safariのみ、マウスオーバーすると画像が一瞬、小さく表示されてしまいます。
といった現象は見られませんでした。
念の為 var.5.1.7 です。
環境が再現できなかったので、何とも言えないのですが、
background-size: 100%; の 縦横を省略しないで書いてみたらいかがでしょうか?

投稿2016/08/23 03:17

chiro.0519

総合スコア118

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/08/23 08:29

ご回答いただきありがとうございます。 こちら、transition:allが原因でした。 Safariをインストールしていただき検証を行っていただきまして ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問