CSSでロールオーバーリンクする方法


【htmlファイル】

<div class="port">
<a href="port.html"><div><li><img src="images/port.jpg">ポート</li></div></a>
</div>

【CSSファイル】

.port {
background-image:url("../images/○○1.jpg");
width:202px;
height:107px;
float: left;
background-position: left;
text-indent: -5000px;
}

.port a:hover{
background-image:url("../images/○○2.jpg");
width:202px;
height:107px;
}

ロールオーバーできません。

指定の仕方が悪いと思ったので、a:hoverの前にli入れたりdivでくくってみたり試行錯誤したところ、一瞬できたのですが上書きする前に消してしまいました。。ふたたび再現できず質問します。

他のサイトを参考にしても、どうもうまくいきませんで。。

上記のhtmlファイルで画像でリンクする方法教えて下さい!

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/02/25 16:34:08
  • 終了:2011/02/26 01:34:27

ベストアンサー

id:yoroshikudesu No.2

yoroshikudesu回答回数38ベストアンサー獲得回数52011/02/25 19:54:34

ポイント100pt

<div class="port">

<li><a href="リンク先1">ポート</a></li>

<li><a href="リンク先2">ポート2</a></li>

</div>

li{

float: left;}

.port a{

display: block;

background-image:url("画像1");

width:202px;

height:107px;

text-indent: -5000px;}

.port a:hover{

background-image:url("画像2");}

liも入れました。

HTMLのタグの括弧は、半角に打ち直して下さい。

liにクラスを設定して打つのはOKですが、liの外にaはしない。

id:youko0502

わぁー!!

教えていただいた記述で解決できました!本当にありがとうございます!!

2011/02/26 01:28:02

その他の回答(2件)

id:yoroshikudesu No.1

yoroshikudesu回答回数38ベストアンサー獲得回数52011/02/25 18:24:52

ポイント27pt

【htmlファイル】 カッコが全角になってますのでコピペでは使えません

<div class="port">

<a href="リンク先">ポート</a>

</div>

【CSSファイル】

.port a{

display: block;

background-image:url("画像1");

width:202px;

height:107px;

text-indent: -5000px;}


.port a:hover{

background-image:url("画像2");}

単純にはこれだけです。


<a class="port" ...... として、

a.port {}

a.port:hover{}

で指定すればもっと短い。

囲ったりする必要があるならば囲えば良いですが、「li」や「div」を「a」に入れるのはどうなのかと思います。

floatは、メニューを並べるのに「li」をfloatさせたいのでは無いですか?

background-positionは、画像の位置を指定する必要がある場合に使って下さい。

id:youko0502

回答ありがとうございす。

port a:hover{

background-image:url("画像2");}試してみました。なんだかできない。。

a.port {}もできない。。

そうなんです!メニューを並べるためなんです。

liの外にaを入れるとリンクが出来たので…外や無い状態だとリンクの表示がなくなっちゃって。。

何か、きっと問題があるんでしょうね。。うーん。。

「li」や「div」を「a」に入れるのはどうなのかとのことで…

<li class> </li>にしてみました。

リンクされないし、画像も変更されないですね。。

2011/02/25 19:39:15
id:yoroshikudesu No.2

yoroshikudesu回答回数38ベストアンサー獲得回数52011/02/25 19:54:34ここでベストアンサー

ポイント100pt

<div class="port">

<li><a href="リンク先1">ポート</a></li>

<li><a href="リンク先2">ポート2</a></li>

</div>

li{

float: left;}

.port a{

display: block;

background-image:url("画像1");

width:202px;

height:107px;

text-indent: -5000px;}

.port a:hover{

background-image:url("画像2");}

liも入れました。

HTMLのタグの括弧は、半角に打ち直して下さい。

liにクラスを設定して打つのはOKですが、liの外にaはしない。

id:youko0502

わぁー!!

教えていただいた記述で解決できました!本当にありがとうございます!!

2011/02/26 01:28:02
id:Hi32 No.3

Hi32回答回数3ベストアンサー獲得回数12011/02/25 20:01:32

ポイント100pt

< div class="port">

< ul>

< li>< a href="port.html">ポート< /a>< /li>

< /ul>

< /div>

にhtml側を書き直していただけますか?

そして、ご自身がかかれたcssのソースの

.port {

.port a{

に直して再トライしてみてください。


html側ですが

aはインライン要素ですので子供にブロック要素であるdivやliを持てません。

そしてliの親はulかolです。


cssですが

.port a{はportクラスの中のaを指定します。

a.port {}だとa要素の中でもportクラスのみという指定でa自身にportクラス指定しているもののみが対象となります。

id:youko0502

詳しい説明ありがとうございます。今回の問題点が理解できました!!

2011/02/26 01:32:39

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません