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}
申し訳ありませんが、よろしくお願い致します。
<html>のように書くのではなく
コードブロックの冒頭の```を```htmlや```cssのように書いていただけますか?
コードブロックはコピー機能もあるため、コード以外のものがあると言い方は悪いですが邪魔となってしまいます。
あとutlineではなくoutlineでは?
>background-imageを前面に持っていきたいのですが、
画像が後ろに隠れてしまい、うまく表示することが出来ません。
上記がいまひとつどうしたいのか意味が分かりません。
「background-imageを前面に」というのが特に。背景なのに前面にとは・・?
ご指摘ありがとうございます。
コードブロックの書き方と、utline → outlineの修正を更新しました。
「background-imageを前面に持っていきたい」という説明がうまく出来ずに申し訳ありません。
background-imageで画像を配置するということが根本的に間違いだと気づきました。
::afterを試してみたのですがうまくいかず…他の方法を試してみたいと思います。
ありがとうございます!
やりたいことが今一つこちらに伝わっていないので背景に画像を使うのが不適当がどうかは判断しかねます