[ 解決済 ] 投稿リストのタイトルの色をマウスオーバー時に変更しないようにしたい

[山腰亮太]

■ WordPress のバージョン
WordPress 6.0.3

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
14.23.4

■ Pro Unit のバージョン
0.23.2

■ スキンの種類
Evergreen

■ スキンのバージョン
0.1.5

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
・投稿リストのタイトル（リンク箇所）の色がマウスオーバー時に変化しないようにしたいです
・投稿リストのタイトルを押下時に画面遷移はしたくないです
・投稿リストはスクロールできるようにしたいです
・他箇所ではマウスオーバー時に色を変更させたいです

■ 自分で試した事
投稿リストにHTMLで独自クラスを設定し、追加CSSから疑似クラス（:active）でpointer-eventsをnoneにしています。

↓ソース↓
<div class=”recruitment-info” style=”border: 1px solid #ccc; height: 180px; overflow: auto; width: 80%; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #fffcfc; margin: auto; padding: 10px;”>
<!– wp:html –>
<!– wp:vk-blocks/post-list {“name”:”vk-blocks/post-list”,”layout”:”postListText”,”col_sm”:1,”col_md”:1,”col_lg”:1,”col_xl”:1,”col_xxl”:1,”isCheckedPostType”:”[\u0022recruitment_info\u0022]”} /–>
<!– /wp:html –>
</div>

■ 症状が発生するブラウザ
chrome

■ 実際の症状
・:activeを記述しなければマウスオーバー時に色は変更されませんが、スクロール機能も無効化されました
・独自クラスに対して:hover、:focusでcolorを記述しましたが色は変更されました
・postListText_titleクラスにマウスオーバー前の色と同じcolorを設定しましたが、色は変更されました。
・!importantを記述しましたが、色は変更されました
・.main-sectionクラスの–vk-color-text-link-hoverを追加CSSに記述しましたが、「何かうまくいかなかったようです」と表示されて設定できませんでした
・.独自クラス > aでcolorを追加CSSに記述しましたが、「何かうまくいかなかったようです」と表示されて設定できませんでした

■ その他特記事項
・スクロールボックスの中に投稿リストを入れています
・マウスオーバー時の色は、カスタマイズ画面で設定しています

[対馬 俊彦]

状況がわかりにくいので回答しづらいと感じました。

* 投稿リストはカードタイプと理解してよいのか？

* 「スクロールボックス」とはなにか？ iframe のこと？

スクリーンショットに説明を入れた図を提示していただくか、
差し支えなければ、その現象が起きている URL を提示していただく方が回答がつきやすいと思います。

とりあえず回答できるこちら ↓ だけ参考情報を書かせていただきます。

> 「何かうまくいかなかったようです」と表示

経験的に、これが起きる原因はサーバーの WAF が原因のことが多いです。
だとすると、今回質問されている件とは別の問題ということになりそうです。

[山腰亮太]

対馬 俊彦 様
ご回答ありがとうございます。

* 投稿リストはカードタイプと理解してよいのか？
→表示タイプ：テキスト1カラムです

* 「スクロールボックス」とはなにか？ iframe のこと？
→HTMLとCSSで自作しています。
スクロールボックス部分のみのコードも載せさせていただきます。
<div class=”recruitment-info” style=”border: 1px solid #ccc; height: 180px; overflow: auto; width: 80%; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #fffcfc; margin: auto; padding: 10px;”>
投稿リストを張り付け
</div>

> 「何かうまくいかなかったようです」と表示
WAF設定は現在OFFにしております。

上手く状況をご説明できず申し訳ございません。
画像を添付いたしますので、ご確認の程よろしくお願いいたします。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

.recruitment-info .postListText_title a {
    pointer-events: none;
}

この CSS でやりたいことができると思います。

「何かうまくいかなかったようです」については、
サーバーの会社に問い合わせた方が解決が早いのでは…という気がします。

[山腰亮太]

対馬 俊彦 様

ご回答ありがとうございます。

ご回答いただいたCSSを試してみたところ、希望通りの状態になりました。
「何かうまくいかなかったようです」の表示もなく正常に完了できましたので安心いたしました。

この度は迅速な回答ありがとうございました。
またご縁がございましたらよろしくお願いいたします。

[投稿者]

投稿