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

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

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

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

HTML5

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

212閲覧

エフェクトを追加したボタンアイコンのリンク機能がちゃんと作動するようにしたい。

panda24

総合スコア14

CSS3

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

HTML5

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2023/05/23 13:40

編集2023/05/24 10:59

実現したいこと

●エフェクトを追加したボタンアイコンのリンク機能がちゃんと作動するようにしたい。

前提

wordpressのswellというテーマを使いサイトを制作しています。

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

swellのボタンを配置しcssに追記を行いカーソルがボタンに触れたときに
波紋が発生するアニメーションを追加したのですが
リンクを設定しても機能しなくなりました。
普通のボタンであればリンクは機能します。
また、カーソルをボタンに当てたときに
波紋のアニメーションが発生するよりも早くクリックすれば
リンクは機能しています。
波紋のアニメーションが発生後でもリンク機能が正しく動作するためにはどうすればいいでしょうか?
もしくはクリックと同時に波紋が発生するようにするにはどうすればよいでしょうか?
(クリックが機能すると波紋の発生を見ることなくすぐリンク先に飛ぶので打消し線を入れました。)

該当のソースコード

【HTMLのコードになります】

<div class="wp-block-button is-style-fill hamon" id="top-button"><a class="wp-block-button__link wp-element-button" style="border-radius:0px">もっと見る</a></div>

【CSSのコードになります】
#top-button.wp-block-button .wp-block-button__link {
padding: calc(0.367em + 2px) calc(1.333em + 2px);
background-image: linear-gradient(0deg, rgba(226, 235, 240, 1), rgba(51, 51, 51, 1));
}

.hamon{
position: relative;
display:inline-block;
text-decoration: none;
color: rgba(0,0,0,0);
outline: none;
}
.hamon:hover::before {
content: '';
position: absolute;
left:30%;
top:0;
border: 2px solid;
background: conic-gradient(from 90deg, #C3CFE2, #F5F7FA, #C3CFE2, #F5F7FA, #C3CFE2);
width: 60px;
height: 60px;
border-radius: 50%;
opacity: 1;
animation:1s circleanime2 forwards;
}
@keyframes circleanime2{
0%{
transform: scale(0);
}
100%{
transform:scale(3);
opacity: 0;
}
}

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

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

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

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

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

guest

回答1

0

ベストアンサー

疑似要素.hamon:hover::beforeがリンク要素を覆ってしまうので反応しないのでしょう。
これに、pointer-events: none; を追加してマウスイベントを透過されればどうでしょう。

pointer-events - CSS: カスケーディングスタイルシート | MDN

css

1.hamon:hover::before { 2 content: ""; 3 position: absolute; 4 left: 30%; 5 top: 0; 6 border: 2px solid; 7 background: conic-gradient( 8 from 90deg, 9 #c3cfe2, 10 #f5f7fa, 11 #c3cfe2, 12 #f5f7fa, 13 #c3cfe2 14 ); 15 width: 60px; 16 height: 60px; 17 border-radius: 50%; 18 opacity: 1; 19 animation: 1s circleanime2 forwards; 20 pointer-events: none; /* 追加 */ 21}

投稿2023/05/24 01:17

hatena19

総合スコア33620

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

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

panda24

2023/05/24 01:59

無事解決しました!ありがとうございます! このような機能があるとは知りませんでした!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問