マウスをのせた時に画像の色を変える

解決済

質問者：rikao5160
質問日時：2012/06/30 14:10
回答数：2件

色々試してみたのですが、初心者ですのでどれも上手くいきません。
下記のreadmoreの画像の色をホバー時に切り替えたいです。
別の画像を使っても使わなくてもどのような方法でも構いませんので、
何方か教えて頂けないでしょうか。
よろしくお願いします。

<div class="post-content">
<p><?php echo string_limit_words(get_the_excerpt(), 55); ?><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>' class="readmore"><img src= "画像url" border="0" width="91" height="30" <img align="right"></a></p>
</div>
<div class="clear"></div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： neko-ten
回答日時：2012/06/30 15:36

なんかまずPHPするまえにHTML勉強するべきだと思うけど・・・

imgがタグ入れ子になってる理由は何だろう。

一般的には、CSSをつかってhover指定を行う。
aのdisplayをblockにして、画像サイズに合わせたheight/widthを指定。状況に合わせてfloatを指定。
画像を背景としてい指定する。文字はネガティブマージンなりでふっとばす。
マウスオーバー時の画像を別に指定して、hoverでその画像を背景に指定する。

JavaScriptでmouseoverとmouseoutでそれぞれsrc書き換えをすることもある。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございました。勉強し直してからやってみます。

通報する

お礼日時：2012/06/30 16:09

No.2

回答者： toast5
回答日時：2012/06/30 15:38

ロールオーバーには PHP 使ったり Javascript を使ったり、いろんな方法がありますが、

僕が知ってるいちばん簡単な方法はこういうの。IE で機能するのかどうか確認したことはありませんが、
僕の Mac 環境では機能します。

<html>
<head>
<title>test</title>
<style type="text/css">

</style>
</head>
<body>
<a href="http://www.yahoo.co.jp/"><img src="http://i.imgur.com/xxrNS.jpg" width="640" height="472" border="0" alt=""></a>
</body>
</html>