人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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ファイルで画像でリンクする方法教えて下さい!


●質問者: youko0502
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:.jpg :hover background-image background-position CSS
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● yoroshikudesu
●27ポイント

【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は、画像の位置を指定する必要がある場合に使って下さい。

◎質問者からの返答

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

port a:hover{

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

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

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

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

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

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

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

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


2 ● yoroshikudesu
●100ポイント ベストアンサー

<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はしない。

◎質問者からの返答

わぁー!!

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


3 ● Hi32
●100ポイント

< 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クラス指定しているもののみが対象となります。

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ