![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
色々試してみたのですが、初心者ですのでどれも上手くいきません。
下記の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>
No.1ベストアンサー
- 回答日時:
なんかまずPHPするまえにHTML勉強するべきだと思うけど・・・
imgがタグ入れ子になってる理由は何だろう。
一般的には、CSSをつかってhover指定を行う。
aのdisplayをblockにして、画像サイズに合わせたheight/widthを指定。状況に合わせてfloatを指定。
画像を背景としてい指定する。文字はネガティブマージンなりでふっとばす。
マウスオーバー時の画像を別に指定して、hoverでその画像を背景に指定する。
JavaScriptでmouseoverとmouseoutでそれぞれsrc書き換えをすることもある。
No.2
- 回答日時:
ロールオーバーには PHP 使ったり Javascript を使ったり、いろんな方法がありますが、
僕が知ってるいちばん簡単な方法はこういうの。IE で機能するのかどうか確認したことはありませんが、
僕の Mac 環境では機能します。
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
a img {border:none;}
a img {opacity: 1; /* IE以外透過設定 */ filter: Alpha(opacity=100); /* IE用透過設定 */ }
/*a:hover {background: #FFF; }*/
a:hover img {opacity: 0.4; /* IE以外透過設定 */ filter: Alpha(opacity=60); /* IE用透過設定 */ }
-->
</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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
水面の波紋
-
リンクを知らせる手のマークが...
-
画像をクリックして同じページ...
-
画像の横に文字をうまく配置で...
-
inputタグでサーバにデータを送...
-
UDP通信を使うチャットプログラ...
-
XML画像データををHTMLで簡単に...
-
画像のサイズが変わらない
-
ホームページの一番下に配置し...
-
画像を、横並びにするには!?
-
画像の場合のみ、下線を消す方...
-
Dreamweaverで画像サイズ修正
-
imgタグは何で囲むのが良いか
-
【HTML/CSS】ボタンの枠が伸び...
-
画像の縦サイズが小さいと隙間...
-
ポップアップウィンドウのサイ...
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
リストマーカーをボックス内に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
ポップアップウィンドウのサイ...
-
画像のサイズが変わらない
-
XML画像データををHTMLで簡単に...
-
【HTML/CSS】ボタンの枠が伸び...
-
UDP通信を使うチャットプログラ...
-
リンクを選択したときの青い枠...
-
favicon.ico はもういらない?
-
table で画像をピッタリとくっ...
-
CSSの左横に隙間ができてしまい...
-
HTMLのIMAGEに。。
-
ホームページで画像を横に並べ...
-
画像とテーブルの隙間をなくす。
-
リンクをつけた画像をクリック...
-
HTMLは、シングルクォートかダ...
-
縦長広告をウェブページの右側...
-
c言語を用いて画像の透明度をあ...
-
ホームページタグ打ち。サイズ...
おすすめ情報