マウスオーバー時に画像と一緒に文字を変える方法を教えて下さい。

html&cssを勉強中の初心者です。
簡潔に、やりたいことは以下の2点です。
1.マウスオーバーした時に画像を変える
2.同じくマウスオーバーした時に画像の上に配置している文字の色も変える
現状、１と２どちらもそれぞれ単独では出来ているのですが、画像にマウスを置いた時点で文字の色も変える方法が分かりません。（文字のところまで持っていかないと変わらない）

なお、文字はabsoluteを使って配置していて、画像と一体化されていません。


【html】
<div class="relative1">
<a href="test.html">
<img src="img/button_search_blue.png" width="230" height="60" alt="検索">
　<p class="absolute1">検索</p>
　　<p class="absolute2">search</p></a>
</div>

【css】
.relative1{/*検索ボタンの画像*/
position:relative;
width:230px;
float:left;
margin-top:5px;
margin-left:10px;
background:url("img/button_search_yellow.png")no-repeat;
}

.relative1 a:hover{
background-color:transparent;
}

.relative1 a:hover img{/*検索ボタンのマウスオーバー時_青の画像を隠す*/
visibility:hidden;
}

.absolute1{/*検索ボタンの「検索」フォント設定*/
position:absolute;
bottom:10px;
left:60px;
color:black;
font-size:20px;
width:230px;
}

.absolute1:hover{/*検索ボタンの「検索」マウスオーバー時*/
color:red;
}

.absolute2{/*検索ボタンの「search」フォント設定*/
position:absolute;
bottom:-5px;
left:80px;
color:white;
width:230px;
}

.absolute2:hover{/*検索ボタンの「search」マウスオーバー時*/
color:red;
}

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2017/03/22 12:11

基本から説明します。

ご存知のようにHTML(必ず大文字)は、文書構造だけを記述し、プレゼンテーションはCSSなどのスタイルシートで行います。基本ですから・・
　構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

HTMLは
<p><a href="test.htm><img src="img/button_search_blue.png" width="230" height="60" alt="検索"></a></p>
と言うことでしょ。
でも、検索の画像はそのページのコンテンツではないので

<p class="search"><a href="test.htm>検索</a></p>

のほうがベストです。段落に目印あるほうが良いので、classをつけてます。
★HTMLには、文書構造しか書かれていないため、改定も容易ですしデザインは自由に変更できる。スタイルシートもわかりやすい。
★継承や詳細度というカスケーディングはきちんと理解しておきましょう。
★floatされた時点で、staticでないのでposition:rerative;は要らない。

p.search{
＿width:230px;height:60px;
＿float:left;
＿margin:5px 0 0 10px;
＿line-height:60px;
＿text-align:center;
＿font-weight:bold;
＿font-size:30px;
}
p.search a{
＿display:block;
＿width:100%;height:100%;
＿background:url(img/button_search_blue.png);
＿color:blue;
＿text-decoration:none;
}
p.search a:hover{
＿background:url(img/button_search_yellow.png);
＿color:green;
}
p.search a:active{
＿color:red;
}

★下記サイトを参考に。文書構造しかないのでデザインは自由になる
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )

この回答へのお礼

ご丁寧にありがとうございます！色々試してみて
a:hover .absolute1{
color:red;
}
で出来ました。ORUKA1951さんの回答も参考にさせて頂きます。

お礼日時：2017/03/23 09:39

No.2 回答者： ORUKA1951 回答日時： 2017/03/22 14:10

補足です。

divは、意味のないブロックでHTML4.01では、「class,idを併用して文書構造を示す」( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )目的で使われていました。しかし、それでは「relative1」のように、全く意味のない使われ方がされてきた反省から、HTML5ではdivは原則使わないことになり、代わりに文書構造を示す要素が追加されました。
　4.4 Grouping content — HTML5( https://www.w3.org/TR/2014/REC-html5-20141028/gr … )
　のNOTE

　ここは、単に段落ですから<p></p>でよいということ。それでは誰もわからないので、classでsearchをclassとして付けた。