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

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

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

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

WordPress

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

4513閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

WordPress

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

2クリップ

投稿2018/05/10 02:52

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

<div style="height: 300px; width: 33.33%; border-style: solid; border-left: inset 1px #000000; text-align: center; float: left; ">
tokimi👍を押しています

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

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

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

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

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

m.ts10806

2018/05/10 02:53

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

回答2

0

ベストアンサー

<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‎">

投稿2018/05/10 10:22

編集2018/05/11 08:02
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

stampdoor

2018/05/10 14:26

嘘をつくのはやめましょう。 何らかで困っていて検索したユーザーがこのページを見た場合、間違った認識を与えてしまいます。 かなり厳密にセレクタを絞っていなければページ内にstyleで設定したものよりインラインCSSで 設定したもののほうが優先処理されるのはある程度CSSをかじっている人はわかります。 あなたの最初の質問文ではCSSとHTMLの分離も理解できていないような内容でした。 そして自身で解決まで導いた場合は、その処理まで書くのが暗黙のルールです。 このままではあなたが正解に至ったということを信じる根拠がありません。 まぁ、何を言っても聞く耳を持たないようなので後は適当に書きますが、 人にものを聞いてるのですから、少し謙虚になりましょうよ。 大学の受験問題を手伝う人がいたとして「算数がわかりません」、って言われたら ちょっともう少し自分でできることがあるでしょう?って思うでしょ。 自分が傷つきたくないからって都合のいい答え以外を排除していては、いつか本当に手詰まりになるよ。 恐らく社会にまだ出ている人じゃないんでしょうが(出ていたらそれはそれで問題ですが)。 IT関係でどこかに入社しても「始めたばっかりでわからないのに」とか「丁寧に教えてくれないほうが悪い」とか言って早期退職するパターンの予感をひしひし感じる。 あなたの今後に幸あれ。 これ以上他の回答者との軋轢が生まれないように祈るばかりです。 P.S. Lhankor_Mhyさん 申し訳ございません、なんだかとばっちりを受けてしまって。 とても丁寧なレスをありがとうございます。 実に素晴らしいアフターケアだったと思います。 フォローさせていただきます。
退会済みユーザー

退会済みユーザー

2018/05/11 08:38 編集

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

2018/05/11 01:07 編集

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

2018/05/11 01:33

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

退会済みユーザー

2018/05/11 06:23

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

2018/05/11 06:25

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

退会済みユーザー

2018/05/11 06:27

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

2018/05/11 08:57

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

0

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

html

1<div class="hoge"> 2... 3</div>

css

1.hoge{ 2 通常のcssスタイル 3} 4.hoge:hover{ 5 マウスホバー時のCSSスタイル 6}

投稿2018/05/10 02:56

stampdoor

総合スコア483

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

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

退会済みユーザー

退会済みユーザー

2018/05/10 03:05

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

2018/05/10 04:23

スタイルシートの概念は理解していますか? 出来れば外部ファイル化しましょう。 初歩的なこと過ぎて書くのもあれですが、 例えば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.

2018/05/10 04:35 編集

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

退会済みユーザー

2018/05/10 06:19

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

2018/05/10 06:35

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

2018/05/10 06:45

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

退会済みユーザー

2018/05/10 07:08 編集

Lhankor_Mhyさん わざわざ言いたくはないのですが。。 >初歩的なこと過ぎて書くのもあれですが わからないから聞いている質問者に向かってわざわざ言うことでしょうか。 >本来であれば調べれば出てくることです。 >まず調べましょう。そして学習しましょう。 十数種類のサイトをみても分からないので質問したのですが、質問することが悪いことのように受け取れます。 こういう方は回答してくださらなくて結構ですのでどうぞスルーしてください。
stampdoor

2018/05/10 07:14

あっ…(察し)
Lhankor_Mhy

2018/05/10 07:17

> r.nakamuraさん 参考になりました。ありがとうございます。 > わざわざ言いたくはない 私もわからないのでお聞きしたのですが、「わざわざ言いたくはない」とわざわざ言わなくてはいけないことなのでしょうか。
退会済みユーザー

退会済みユーザー

2018/05/10 07:31 編集

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

2018/05/10 08:19

> 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スキルがある回答者が複数います。検討してみてください。 以上、ご理解をいただけますと、幸甚です。 まあ、無駄に口が悪い回答者とか、わかってない質問者と見るとマイナス評価をつける回答者とか、そういうのどうなのかね、とは自分も思う時がありますけどね。
退会済みユーザー

退会済みユーザー

2018/05/11 06:56 編集

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

2018/05/11 01:13 編集

Lhankor_Mhyさん この質問者さんには「検索の仕方から試行錯誤の仕方」を教えてあげたほうが良いかもしれません。 あげられたQiitaの記事、よく読まれているので私も参考にしていますが、その中にある「魚の釣り方を教えよ」というところですね。 私の個人的な経験から技術者観点の理論だけでは通じない方も一定数いらっしゃいますので(中には技術者じゃないから、代理でやってるから、と色々な背景の方がいるので一辺倒では良くないことも多々あります)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問