- ベストアンサー
CSSに関する質問です
CSSで下記のように設定したとします。 A:HOVER{ color #好きな色; position:relative; top:1px; left:1px; } こうするとリンクにマウスを乗せた時に文字が斜め下に移動するように出来ますが、 これをテキストのみに適用させたいのです。 画像は動くと不格好なところも多いので、画像だけ適応させないような方法はないのでしょうか？ 難しいような場合には、 個別に画像に対してCSSをかぶせる予定です。 よろしくお願いいたします。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- マウスをのせると画像が動くcssについて
マウスをのせると画像が動くCSSについて質問します。 http://kumacrow.blog111.fc2.com/blog-entry-486.html このページに書いてあることをやりたいです。 通常ですと、<head>内にCSSを記入して、html内でclassで呼び出すと思うのですが、html内に全て書く場合はどうすればいいのでしょうか？ <a href="http://～" style=" a:hover { position: relative; top: 5px; left: 5px;}"><img src="（画像のある場所）" /></a> このような書き方では上手くいきません。 どのように書けばいいのか教えてください。
- 締切済み
- HTML
- マウスが乗ったとき斜め下に下がる
画像にマウスが乗ったときに、斜め右下に下がるには、CSSで A:HOVER{position : relative;top:2px;left:2px;} と設定すれば よいとはわかるのですが、この設定は部分的にあてはめることはできないのでしょうか？ 同じテーブル内に、下がるアクションがほしいリンク画像と、下がってほしくないリンク画像があるのです。 どのようにすればよいか教えてください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSについて
カーソルがルンク先文字にふれた時に色が変わり、 リンクしたあとリンク済みになるCSS( スタイルシート)はこれでいいでしょうか？ リンク済みの色が変わりません。 <!-- <style type="text/css"> --><!--A:HOVER{position : relative;top:2px; left:2px;} </style> --> <style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style>
- ベストアンサー
- HTML
- IEに対応するCSSの記述について
リンクボタンクリック時に一瞬だけリンクが沈んでいるように見せるCSSを記述したところ、FireFox3.0.1とOpera9.52ではきちんと沈んでいるように見えましたが、IE6とIE7はa:hoverのイベントは取れるものの、a:activeのイベントを取ることが出来ませんでした。 何か書き方が違うのだと思うのですがまだまだ素人で解決方法がわからずに困っております。 どなたかご存じでしたらご教授よろしくお願いします。 ---ソース---- <html> <head> <title>無題のページ</title> <style type="text/css"> a:hover { position:relative; left:-1px; top:-1px; } a:active { position:relative; left:1px; top:1px; } </style> </head> <body> <a href="#">aaaaaa</a> </body> </html>
- ベストアンサー
- HTML
- CSSについてです。回答よろしくお願いします！
現在外部リンクでCSSを使っているのですが、リンク設定を a:hover {text-decoration: none; color: #1E90FF; position: relative; top:2px; left:0px;} という風に使っています。 しかし、同じページにリンクを２つ作ると上記内容に２つともなってしまいます。 １つだけ上記内容のリンク設定にしたいのですが、どうすればよろしいでしょうか？ 質問の内容がわからないようでしたら、説明しますので、回答よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- スタイルシートの適応のやり方
現在ドリームウェーバーでHPを作っていますが CSSを使いメニューボタンをへこむボタンにしたいのですが うまく反映されません。 ソフトが最近から使い始めたのでうまく理解できていないところです。 a.sample{ text-decoration:none; } a:hover.sample{ color:#CC0000; border-width:0px 1px 1px 0px; border-style:solid; border-color:#990000; position:relative; top:-2px; left:-2px; } a:active.sample {/*クリック中の色*/ color:#CC0000; border-width:1px 0px 0px 1px; border-style:solid; border-color:#990000; position:relative; top:2px; left:2px; padding-left:3px; } こちらです。 手順を教えて頂けないでしょうか？
- ベストアンサー
- HTML
- HTML,CSSの記述について
添付画像のようなレイアウトにする場合，どのように記述すればよいでしょうか？ （画像マウスオーバー時に画像のみが切り替わるという事です） 初心者なのでサンプルを書いてくださると助かります ↓これは自分で考えてみたものです。自分のブログからのコピペなのでおかしいかもしれません。 【html】 <div class="rolloverPositionMenu"> <div align=left> <img src="a.jpg"> </div></div> <div align=right> <div class="left">text-areaA</div><div class="right">text-areaB</div> <div class="left">text-areaC</div> </div> 【CSS】 .left { float:left; } .right { float:right; } a.rolloverPositionMenu { background: #fff url(b.jpg) left top no-repeat; color: #fff; display: block; overflow: hidden; text-align: center; position: relative; } a.rolloverPositionMenu:hover{ background-color: #f73; color: #f00; } a.rolloverPositionMenu img { background-color: #fff; } a.rolloverPositionMenu:hover img { position: relative; }
- ベストアンサー
- HTML
- css
こんにちは、CSSの勉強をしています。 書籍に下記のようなCSSが書かれてありました。 .photoBoxL .photoSpace, .photoBoxR .photoSpace{ position: relative; left: 0px; top: 0px; border-left: solid 1px #999999; border-bottom: solid 1px #999999; background-color:#FFFFFF; padding: 5px; } これはどのように読めばいいのでしょうか？ 「.photoBoxLというクラスの中にある.photoSpace」と、「.photoBoxRというクラスの中にある.photoSpace」の二つに対して設定するという意味なのでしょうか？ 何かお分かりの方がいましたら教えてください。 よろしくお願いします。
- ベストアンサー
- その他(業務ソフトウェア)
- CSSのdivのposition:relative;で位置がずれない
IE6を使用しています。 次のような 「sample.css」 .sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; } .sample2 {color:#ff0000; position:absolute; top:10px; left:10px } .sample3 {color:#ff0000; position:absolute; top:30px; left:30px } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="sample"> position:relative <div class="sample2"> sample2 </div> <div class="sample3"> sample3 </div> </div> </body> </html> を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を 表示させたいのですが、どうも下にずれてないようなのです・・・ 何が原因なのでしょうか？
- ベストアンサー
- HTML
- CSSの記述方法について
CSSを勉強しはじめたばかりの初心者です。 画像にマウスカーソルをあわせると色が変わるCSSに、 このように記述されている箇所がありました。 #example { width: ○○px; height: ○○px; padding-top: ○○px; padding-left: ○○px; background-image: none; } #example a,#example a:hover { display : block; width: ○○px; height: ○○px; padding-top: ○○px; background-image: url(○○.png); background-repeat: no-repeat; text-decoration: none; } #example a { background-position: ○○px ○○px; } #example a:hover { background-position: ○○px ○○px; } aとa:hoverの指定だけで実現できそうなのに、 なぜこのように4つもidがあるのでしょうか。 何かの意図やテクニックのひとつなのでしょうか？ まだ記述方法を詳しく理解できていないので、不思議に思いました。 ご存知の方がいらっしゃいましたらご教示ください。 よろしくお願いいたします。
- 締切済み
- CSS
お礼
有り難うございます。 早速実践させていただきました。