下記のコードで、マウスホバー時に水色のマーカーから、黄色のマーカーに変わり、更に少し上に持ち上げるというアニメーション効果を付けたかったのですが、アニメーション(transition)が適用されません。
CSS
1/* マーカースタイル アクア */ 2.marker-aqua { 3 background: linear-gradient(transparent 60%, aqua 50%); 4 transition:all 2s; 5} 6 7.marker-aqua:hover { 8 background: linear-gradient(transparent 60%, yellow 50%); 9 position:relative; 10 bottom:4px; 11}
HTMLのフォーマットはこちらになります。
HTML
1<strong class="marker-aqua">ここにテキスト</strong>
使っているOSはWindows 10、ブラウザーはfirefox ver 65.02、WordPress 5.1を使っています。
参考URL:https://www.infoaxel.com/2018/09/22/post-319/
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー