WordPress内のマウスオーバーでの背景色変更

Question

WordPressでホームページを作成しているのですが、ボーダーで囲っている部分がクリックした際、リンクに飛ぶのが一目でわかるよう、カーソルを合わせた際、そこの部分の背景色を変更したいのです。
いろいろサイトを見てみましたが、追加した箇所が文字列で反映されてしまったり、変化が全くなかったりです。
下のコードの中にhoverやonmouseoverのタグを追加して背景色の変更をできませんでしょうか。

<div style="height: 300px; width: 33.33%; border-style: solid; border-left: inset 1px #000000; text-align: center; float: left; ">

Comments

[m.ts10806]

調べてみたこと、やってみたこと（そのソースコード）を具体的に追記してください。また参考先サイトがあればURLも質問に追記してください。既に見た先が回答についてしまうと無駄なやり取りが発生しますし、もしかしたら参考記事の理解が間違っているために解決に至れていないのかもしれません。https://teratail.com/help/question-tips#questionTips1-2 またプログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

Answer 1

<div>内に大量のスタイルを入れたので、hoverの優先順位が低くなったと考えられます。 以下のようにスタイルタグのみで書くと作動しました。 外部ファイルは1ページのみの作成なので、あえて作りませんでした。 初歩的かと思う方もいらっしゃると思いますが、そのための質問する場だと思います。

<style>
.stampdoor { height: 350px; width: 33.33%; border-style: solid; border-left: inset 1px #DCDCDC; text-align: center; float: left; }

.stampdoor:hover { background-color:#FFFFFF; color:#808080; }
</style>

<a class="stampdoor" href="https://idungivaf‎">

Comments

[stampdoor]

嘘をつくのはやめましょう。

何らかで困っていて検索したユーザーがこのページを見た場合、間違った認識を与えてしまいます。

かなり厳密にセレクタを絞っていなければページ内にstyleで設定したものよりインラインCSSで
設定したもののほうが優先処理されるのはある程度CSSをかじっている人はわかります。

あなたの最初の質問文ではCSSとHTMLの分離も理解できていないような内容でした。

そして自身で解決まで導いた場合は、その処理まで書くのが暗黙のルールです。

このままではあなたが正解に至ったということを信じる根拠がありません。

まぁ、何を言っても聞く耳を持たないようなので後は適当に書きますが、
人にものを聞いてるのですから、少し謙虚になりましょうよ。

大学の受験問題を手伝う人がいたとして「算数がわかりません」、って言われたら
ちょっともう少し自分でできることがあるでしょう？って思うでしょ。

自分が傷つきたくないからって都合のいい答え以外を排除していては、いつか本当に手詰まりになるよ。

恐らく社会にまだ出ている人じゃないんでしょうが（出ていたらそれはそれで問題ですが）。

IT関係でどこかに入社しても「始めたばっかりでわからないのに」とか「丁寧に教えてくれないほうが悪い」とか言って早期退職するパターンの予感をひしひし感じる。

あなたの今後に幸あれ。

これ以上他の回答者との軋轢が生まれないように祈るばかりです。

P.S.
Lhankor_Mhyさん

申し訳ございません、なんだかとばっちりを受けてしまって。
とても丁寧なレスをありがとうございます。
実に素晴らしいアフターケアだったと思います。
フォローさせていただきます。

[退会済みユーザー]

嘘はついておりません。

回答は控えてくださいと申したはずです。

あなたのその言い方、不快に感じる方は私以外にもたくさんいる思いますよ。
なんとか族か知りませんが、正当化しないでください。ただの、人の気持ちを一切考慮しない人なんだと思います。
今まで対人関係でもめることも多々あったでしょう。
あなたの両親、同僚に同情してしまいます。

[m.ts10806]

stampdoorさん
全く回答になっていないベストアンサーなので何の参考にもならないと思いますよ。当件についてはそこまで気にしなくて問題ないかと。
（今後困るのはこの質問者さんですし）

[stampdoor]

全く的はずれな回答ですのでマイナス評価をさせていただきます。

[退会済みユーザー]

わかりましたので、これ以上何も言わないでください。

[m.ts10806]

では正しい解決策をお書きください。
発生した現象、うまくいかない原因、解決策　が全くつながっていないために指摘されていますので。

[退会済みユーザー]

teratail始めたばかりなので書き方がよくわからないです。
誰も参考にしない回答なら、もう無視してください。

[m.ts10806]

説明書は熟読して利用しましょう。（用法・容量は守りましょう）
https://teratail.com/tour
https://teratail.com/help/question-tips

質問も回答も投稿者のみ編集することができます。
修正・更新すれば良いだけの話です。

[stampdoor]

教えたことそのまま使っていて草
なんだか可愛くなってきたな

Answer 2

まず特別な必要に迫られない限りインラインCSSはやめましょう。
スタイルを定義するためにstylesheetがあります。

<div class="hoge">
...
</div>

.hoge{
   通常のcssスタイル
}
.hoge:hover{
   マウスホバー時のCSSスタイル 
}

Comments

[退会済みユーザー]

ありがとうございます。
それでやると
.hoge:hover{
background-color: #e0e0e0;
}
この部分が文字列になってしまうのです。

[stampdoor]

スタイルシートの概念は理解していますか？
出来れば外部ファイル化しましょう。

初歩的なこと過ぎて書くのもあれですが、
例えばhoge.cssというファイルを作ってcssを書き、
ページに下記のようにリンクさせます。
<link rel="stylesheet" type="text/css" href="CSSファイルまでのパス/hoge.css"/>

ページ内に書くのであれば、
<style type="text/css" media="screen">
.hoge{
通常のcssスタイル
}
.hoge:hover{
マウスホバー時のCSSスタイル
}
</style>

本来であれば調べれば出てくることです。
まず調べましょう。そして学習しましょう。

今のままではホームページは作れません。

[dit.]

横から失礼します。
https://saruwakakun.com/html-css/reference/where-css
このあたりに、外部CSSの読み込み、styleでの記述、インラインの記述とその優先順位についてわかりやすく書いてあります。基本的にインラインでは疑似クラス（hover等）はできないと思っておいた方がいいです。
ご参考まで。

[退会済みユーザー]

＠stampdoor
わからないのでお聞きしています。
言い方に気を付けてください。

[Lhankor_Mhy]

> r.nakamuraさん
横からすみません。
参考までにお聞かせいただきたいのですが、気をつけたほうがいいと考えられた「言い方」とは、具体的にはどの部分ですか？

[stampdoor]

では「いろんなサイトを見た」とありますがどのようなワードで検索してどれほどのページを参考にしたのでしょうか？参考書などを購入して学習したりしたのでしょうか？
私から見るとかなり早い段階からご自身での検討を放棄して質問に頼っているように見えます。
なんだか他の質問でも色々と回答者に噛み付いているみたいですが言い方にカチンときている場合ではないと思いますよ。

[退会済みユーザー]

Lhankor_Mhyさん
わざわざ言いたくはないのですが。。

>初歩的なこと過ぎて書くのもあれですが
わからないから聞いている質問者に向かってわざわざ言うことでしょうか。

>本来であれば調べれば出てくることです。
>まず調べましょう。そして学習しましょう。
十数種類のサイトをみても分からないので質問したのですが、質問することが悪いことのように受け取れます。

こういう方は回答してくださらなくて結構ですのでどうぞスルーしてください。

[stampdoor]

あっ…（察し）

[Lhankor_Mhy]

> r.nakamuraさん
参考になりました。ありがとうございます。

> わざわざ言いたくはない
私もわからないのでお聞きしたのですが、「わざわざ言いたくはない」とわざわざ言わなくてはいけないことなのでしょうか。

[退会済みユーザー]

Lhankor_Mhyさん
>「わざわざ言いたくはない」とわざわざ言わなくてはいけないことなのでしょうか。
わたしも喧嘩したいわけではないので言いたくない、との意味でした。stampdoorさんにこれ以上悪く思われたら困るので。揚げ足取るのはやめてください。お二人ともこのコメント欄には書かないでください。

[Lhankor_Mhy]

> r.nakamuraさん
失礼いたしました。お詫びいたします。
私も喧嘩をしたいわけではなかったので、ご理解いただければ、と存じます。

teratail の回答者は、「目的を達成する手伝い」をしない傾向があります。
では、どのような回答をするかというと、「スキルアップの手伝い」になるような回答をする傾向にあります。
r.nakamura さんの目的は wordpressでのサイトの作成なのでしょうけれど、teratail の回答者はそれを自力でできるようになるための回答をします。
なので、（ちょうど私がr .nakamura さんにしたような）回答者たちから自明であるように見える質問をしても、r.nakamura さんから見るとそっけない回答が返ってくることが多いかと思います。場合によっては、「この人はどれだけ教えても自力でできるようにならない人だ」と判断され、感情を害するかもしれません。

エンジニアはプロです。本来、彼らのアドバイスは対価を払うべきものなのです。
そこは理解してください。

また、エンジニアたちは、感情を軽視し事実を重視する傾向があります。
https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%92%E3%82%AB%E3%83%B3%E6%97%8F_(%E3%83%8D%E3%83%83%E3%83%88%E7%94%A8%E8%AA%9E)
彼らと付き合うなら、彼らの文化に理解を示すことも必要になるかと思います。

r.nakamura さんは、↓この質問のレベルで言うと、3OI にあるかと思いました。
https://qiita.com/seki_uk/items/4001423b3cd3db0dada7#%E8%B3%AA%E5%95%8F%E3%81%AE%E3%83%AC%E3%83%99%E3%83%AB
なので、「きちんと情報がまとまったところで勉強してみてください」という回答が返ってくるのは、（teratail の文化では）仕方がない面もあるかな、と思います。

もし、teratailが性に合わないのであれば、はてな人力検索に行ってみるのもいいかもしれません。あちらのコンセプトは「質問者の代わりにググります」というもので、しかもITスキルがある回答者が複数います。検討してみてください。

以上、ご理解をいただけますと、幸甚です。

まあ、無駄に口が悪い回答者とか、わかってない質問者と見るとマイナス評価をつける回答者とか、そういうのどうなのかね、とは自分も思う時がありますけどね。

[退会済みユーザー]

訂正：Lhankor_Mhyさん
長文だった為見ておりませんでした。（誹謗中傷は傷つくので見たくないと思い）
サイトを拝見し、納得しました。普段こういう言い方をされないので正直驚いていますが、
こういった方が多いところなんですね。
正直ひどい印象があるyahoo知恵袋が、天国のように感じます。
ありがとうございました。

[m.ts10806]

Lhankor_Mhyさん
この質問者さんには「検索の仕方から試行錯誤の仕方」を教えてあげたほうが良いかもしれません。
あげられたQiitaの記事、よく読まれているので私も参考にしていますが、その中にある「魚の釣り方を教えよ」というところですね。

私の個人的な経験から技術者観点の理論だけでは通じない方も一定数いらっしゃいますので（中には技術者じゃないから、代理でやってるから、と色々な背景の方がいるので一辺倒では良くないことも多々あります）