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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

2回答

3319閲覧

hover時のbackground-imageを前面に持っていきたい。

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2019/01/21 03:25

編集2022/01/12 10:55

hoverエフェクトのを付ける際、background-imageを前面に持っていきたいのですが、
画像が後ろに隠れてしまい、うまく表示することが出来ません。
出来ればhoverの際に、background-imageの色を変えたいです。

大変お手数ですが、どなたがご教授頂きたいです。

html

1 2 <div class="use_btn first">詳しくはこちら</div>

css

1 2div.use_btn{ 3 box-sizing: border-box; 4 -webkit-appearance: none; 5 -moz-appearance: none; 6 appearance: none; 7 background-color: transparent; 8 border: 1px solid #333; 9 border-radius: 30px; 10 color: #333; 11 cursor: pointer; 12 align-self: center; 13 font-size: 13px; 14 line-height: 1; 15 margin: 20px 50px 15px; 16 padding: 12px 0; 17 text-decoration: none; 18 text-align: center !important; 19 font-weight: 800; 20 background-image: url(img/yajirushi.png) ; 21 background-repeat:no-repeat; 22 background-position:right 10px bottom 13px; 23 position: relative; 24 z-index:10; 25} 26.use_btn:hover, .use_btn:focus { 27 color: #fff !important; 28 outline: 0; 29} 30.first { 31 transition: box-shadow 500ms ease-in-out, color 300ms ease-in-out; 32} 33.first:hover { 34 box-shadow: 0 0 40px 40px #333 inset; 35 background-image: url(img/yajirushi_w.png) !important; 36 z-index:100; 37 position:relative; 38}

申し訳ありませんが、よろしくお願い致します。

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

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

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

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

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

m.ts10806

2019/01/21 04:20

<html>のように書くのではなく コードブロックの冒頭の```を```htmlや```cssのように書いていただけますか?
m.ts10806

2019/01/21 04:20

コードブロックはコピー機能もあるため、コード以外のものがあると言い方は悪いですが邪魔となってしまいます。
m.ts10806

2019/01/21 04:22

あとutlineではなくoutlineでは?
m.ts10806

2019/01/21 04:25

>background-imageを前面に持っていきたいのですが、 画像が後ろに隠れてしまい、うまく表示することが出来ません。 上記がいまひとつどうしたいのか意味が分かりません。 「background-imageを前面に」というのが特に。背景なのに前面にとは・・?
退会済みユーザー

退会済みユーザー

2019/01/21 04:54

ご指摘ありがとうございます。 コードブロックの書き方と、utline → outlineの修正を更新しました。
退会済みユーザー

退会済みユーザー

2019/01/21 05:07

「background-imageを前面に持っていきたい」という説明がうまく出来ずに申し訳ありません。 background-imageで画像を配置するということが根本的に間違いだと気づきました。 ::afterを試してみたのですがうまくいかず…他の方法を試してみたいと思います。 ありがとうございます!
m.ts10806

2019/01/21 05:14

やりたいことが今一つこちらに伝わっていないので背景に画像を使うのが不適当がどうかは判断しかねます
guest

回答2

0

下記コードで色で非表示するのではなく、表示させない方法が一般的に使われるかと思います。

CSS

1.use_btn:hover, .use_btn:focus { 2 display: none; 3}

また、重なりを考慮したいという場合は、z-indexプロパティを使用してみてください。
##仕様

CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。

z-index | MDN

よって、hoverされた際にz-indexの値を変更することが良いかと思われます。

投稿2020/04/21 17:10

編集2020/04/21 17:14
kai0310

総合スコア2070

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

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

0

hover時には背景画像を前に出すのではなく、テキストを見えなくすればご希望の表示になりませんか?

css

1.use_btn:hover, .use_btn:focus { 2 color: rgba(0,0,0,0) !important; 3 outline: 0; 4}

投稿2019/01/23 09:58

warajies

総合スコア82

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問