リンクをマウスオーバーしたときにテキストの裏に円を出したい

Question

リンクをマウスオーバーしたときにテキストの裏に円を出したい

●https://www.marchily.jp/
上記のサイトのヘッダー部分のように、リンクをマウスオーバーしたときに円が浮き上がるようなデザインにしたいです。

発生している問題・エラーメッセージ

●がテキストの上にかぶってしまいます。
また●をテキストの中央に配置したいのですがうまくいきません。

該当のソースコード

$(function() {
  $('.wrapper').hover(
    function() {
      $(this).find('.maru').addClass('active');
    },
    function() {
      $(this).find('.maru').removeClass('active');
    }
  );
});	
</script>

.wrapper p {
	position: relative;
	color: #000;
	font-size: 20px;
	background-color: cadetblue;
	display: inline;
}
	
.maru {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: pink;
	animation: pulsate .5s ease-out;
	animation-iteration-count: 1;
	top: 0;
	left: 2%;
	display: none;
}

.active {
	display: block;
}
	
@keyframes pulsate {
    0%   { transform: scale(0, 0); }
    100% { transform: scale(1, 1); }
}

        <div class="wrapper">
			<p>よくある質問</p>
          <div class="maru"></div>
        </div>

試したこと

まずcssのみでデザインをしようと思ったのですができずjqueryを使って考えてみました。
大体のやりたいことはできたと思うのですが、
z-indexで重ね順をテキストが上になるようにしたのですができませんでした。
また中央に来るように
pを親にmaruをposition: absolute;にしようとしたのですが
50％にしてもダメでした。
分かる方いらっしゃいましたらご教授いただけると幸いです。
よろしくお願いします。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

●がテキストの上にかぶってしまいます。

z-indexを指定してください。

.maru {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: pink;
    animation: pulsate .5s ease-out;
    animation-iteration-count: 1;
    top: 0;
    left: 2%;
    display: none;
    z-index:-1; //適当なz-indexを追加
}

また●をテキストの中央に配置したいのですがうまくいきません。

wrapperクラスにpタグと同じ幅を持たせ、relativeを指定します。その後、maruクラスを中央に margin:auto を使い動かします。
参考 : absolute中央寄せのやり方

.wrapper {
  display:inline-block;
  position:relative;
}
.maru {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: pink;
    animation: pulsate .5s ease-out;
    animation-iteration-count: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: none;
    z-index:-1;
}

Comments

[kana0701]

z-indexをマイナスにするという発想は浮かばなかったのでとても助かりました！
参考のURLもありがとうございました！

[zushi0905]

解決しましたか？解決したら解決済にしてくださいね！

[kana0701]

すみません、追加で質問してもよろしいでしょうか？
padding-rightで片側にのみ余白をとったら中央寄せでなくなってしまいました。
その場合maruクラスを中央にしてる margin:autoを変更するのでしょうか？
続けての質問になってしまい申し訳ありません。
お時間あるときで構いませんのでご回答いただけたら幸いです。
よろしくお願いします。

[zushi0905]

どこにpadding-rightを追加したかなど状況が全く分からないので答えかねます。
一旦この問題は解決済にし、詳しい状況を載せた質問を新しく作ることを推奨します。

ここからは殆ど憶測で回答するので的外れだったらごめんなさい。
おそらくwrapperクラスにpadding-rightを付与しているのだと思いますが、私の回答だとwrapperクラスのpaddingの高さ,幅の箱のど真ん中に円を置くというcssになっています。marginならば適応されないので、padding-rightをmargin-rightに変更してみてください。

Answer 2

HTMLとCSSで再現してみたので参考までに。

teratail #204826 - codepen

<div class="circle">text</div>

.circle {
    font-size: 24px;
    font-weight: bold;
    position: relative;
    text-align: center;
    &::before {
        background-color: #ddd;
        border-radius: 50%;
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -12px; // heightの50%
        margin-left: -12px; // widthの50%
        transition: margin-top .2s;
        z-index: -1;
        animation: scaleBack .2s ease both;
    }
    &:hover {
        &::before {
            animation: scaleStart .2s ease both;
        }
    }
}
@keyframes scaleStart {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    90% {
        transform: scale(2.15);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 1;
    }
}
@keyframes scaleBack {
    0% {
        transform: scale(2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

Comments

[kana0701]

お返事遅くなり申し訳ありません！
わざわざありがとうございます！
自分では思いつかなかったので勉強になりました、参考にさせていただきます！

[kana0701]

お礼後に申し訳ございません。
こちら使わせていただいきたくて下記のソースをコピペしたのですが、自分のPCでは動作が確認できないのはなぜでしょう、、？
https://codepen.io/Qanji/pen/wVyjrJ

[k_fujimoto]

ブラウザの要素検証を使用して、クラスにスタイルが適切に反映されているか確認してください。
スタイルは反映されていますか？

[k_fujimoto]

おそらく、SCSSをCSSにコンパイルしていないのではないでしょうか。

[kana0701]

そうでした！そういう細かいところにまだまだ気づけなくて申し訳ないです、、、
CSSになおしてみたら使えました！
ありがとうございました！

[k_fujimoto]

> kana0701
解決してよかったですー！

ここから話すことは単純に僕の経験に基づく話なので流してもらってもよいですが、コードをちゃんと理解していない状態でコピペだけしているとそういう細かいミスに気づけないと思います。（ちゃんと理解していたらすみません。）
なので、参考にしたソースコードの中にわからない所があれば調べてみたり、応用してみることをおすすめします！