半日いじくり回した結果、@Falco さんの Discourse AI ボットを使ってコードを作成することができました ![]()
現在、2週間にわたりボットから支援を受けています。Meta(クエリの意味を検索する際)でも、私のウェブサイトでこのコードやあのコードを書く際にもです。上記の問題を解決するためにまとめることができたコードは以下の通りです。
abbr[title] {
position: absolute;
background: transparent; /* 非アクティブ状態では透明な背景 */
overflow: visible; /* コンテンツが要素の境界からはみ出すことを許可 */
}
@media (prefers-color-scheme: light) {
abbr[title] {
color: var(--primary); /* スクリプトの白または黒の色合い? */
}
}
abbr[title]:hover {
background: #FF6; /* ホバーすると、背景が鮮やかな黄色の色合いに包まれます。*/
}
abbr[title]:hover:after {
content: " " attr(title) "";
position: absolute;
border-radius: 3px;
bottom: 70%; /* この値を変更して、ずれを制御します。 */
left: 0;
width: 250px; /* 固定幅 */
height: auto; /*"調整可能な高さ" */
padding: 2px;
z-index: 9;
background: #00FF00; /* コメントの背景色合いを指定します。 */
color: #333;
margin-bottom: 10px; /* 下部の余白を組み込んで、区切りを作成します。 */
}
ここに残しておきます。誰かの役に立つかもしれません ![]()
追伸。私は専門のソフトウェアエンジニアではないため、コードにエラーが見つかった場合は寛大にお願いします。