インターネットエクスプローラー使用による疑似クラスについて

質問

疑似クラスを利用し、「マウスカーソルをもってくると背景色が変わる」ということを、ＣＳＳで行ないました。

firefoxでは、疑似クラスの所にカーソルをもってきて、すばやく上下に動かしたところ、スムーズに背景色が変わりました。

しかし、インターネットエクスプローラーでは、疑似クラスの所にカーソルをもってきて、すばやく上下に動かしたら、背景色が変わるまでに少し時間がかかりました。いろいろと考え、試してみました。

結果、インターネットエクスプローラーでは、疑似クラスの所にマウスカーソルをもってきたら、左下に一瞬ＵＲＬが表示されたあと、「ページが表示されました」と表記されることが原因だとわかりました。firefoxでは、疑似クラスの所にマウスカーソルをもってきても、左下には常にＵＲＬが表示されます。

そして、「ページが表示されました」と表記される原因が、ＣＳＳの“background属性”にあることを突きとめました。

以下に、かんたんなＨＴＭＬとＣＳＳを作成しました。

--------------------------------------------------------------------
ＨＴＭＬ
----------------------------------------------------------------------
<div id="category">
<a href="http://www.～">test1</a>
<a href="http://www.―">test2</a>
<a href="http://www.＝">test3</a>
<a href="http://www.△">test4</a>
<a href="http://www.×">test5</a>
</div>
-------------------------------------------------------------------
ＣＳＳ
-------------------------------------------------------------------
#category{
margin:0px;
padding:0px;
}（マージンとパッディングを0に指定）

#category a{
display: block;
background-image:url("縦、横１０ｐｘの画像");
background-repeat:no-repeat;
background-position:left;
padding:5px 12px;
width:140px;
border: 1px solid red;
background-color:blue;
text-decoration:none;
}
（幅１４０ｐｘ。疑似クラスの所にマウスカーソルがのっていない時、外枠は赤。背景色は青。左側に１０×１０ｐｘの画像を表示）。

#category a:hover{
display:block;
background-image:url("縦、横１０ｐｘの画像");
background-repeat:no-repeat;
background-position:left;
background-color:green;
border:1px solid black;
text-decoration: none;
}
（疑似クラスの所にマウスカーソルがのっている時、外枠は黒。背景色は緑。左側に１０×１０ｐｘの画像を表示）。
--------------------------------------------------------------------
「background属性」を消してしまえば話は早いのですが、左下にＵＲＬを表示しつつ「background属性」で画像を埋め込むことは可能でしょうか？　お力添えのほど、よろしくお願いいたします。

回答No.3

SAYKA · ベストアンサー

あああ　色々しまった！

>aタグはインライン要素なため
ごめん、確かにblockとしてだからspan側にwidthにした方がよさそうだね

>しかし、画像は表示されませんでした
言われて気が付いた。
<span><a></a></span>
だとspanに背景が有る場合でもaでbackground-colorを指定してるから塗りつぶされちゃうんだよね・・・
画像が透過系であるならspanとaは逆でなきゃならないね
だから相変わらずaがblockで、aの内側にspanを持ってきてそれに背景画像・・・という形でなら画像が透過系ならaのbackground-colorも正しく適用になるかな・・・確認すれば早いんだけどね・・・

お礼

ＳＡＹＫＡさんへ
ありがとうございます。

いろいろとガンバってみましたが、エクスプローラーでは実現できませんでした。

回答No.2

SAYKA

aの中身がそれぞれ独立しているような画像にするのが目的なら　ちょっと手間だけどさらに1つくくるしか無いかも
<div class="category">
　<span class="category2"><a></a></span>
　<span class="category2"><a></a></span>
</div>

#category a　での　display:block;　と　background　はcategory2側で指定するようにする、と。
こうするとaでは画像に関する記述が無くなるという理屈になるんだけど…どう？

お礼

ＳＡＹＫＡさんへ
いろいろと考えていただき、ありがとうございます。

以下のような感じで作成してみました。

--------------------------------------------------------------------
ＨＴＭＬ
----------------------------------------------------------------------
<div id="category">
<span class="category2"><a href="​http://www.​～">test1</a></span>
<span class="category2"><a href="​http://www.​―">test2</a></span>
<span class="category2"><a href="​http://www.​＝">test3</a></span>
<span class="category2"><a href="​http://www.​△">test4</a></span>
<span class="category2"><a href="​http://www.​×">test5</a></span>
</div>
--------------------------------------------------------------------
ＣＳＳ
----------------------------------------------------------------------
#category a{
padding:5px 12px;
width:140px;
border: 1px solid red;
background-color:blue;
text-decoration:none;
}
（aタグはインライン要素なため、width属性を使用することは好ましくないかもしれません。よって、場合によっては「display:block;」とブロック要素になるように記述）。

.category2{
display:block;
background-image:url("縦、横１０ｐｘの画像");
background-repeat:no-repeat;
background-position:left;
}
-------------------------------------------------------------------
としてみました。しかし、画像は表示されませんでした。

試しに、ＣＳＳの「category2」を「category2 a」と記載してみました。
すると、画像は表示されました。しかし、この書き方は、「category a」とおなじになってしまい、やはり「ページが表示されました」と表示されてしまいます。

けれど、新しいボックスを作成するところに打開策があるような気がします。もう少しチャレンジしてみます。

回答No.1

SAYKA

画像が同じ物なのだとしたら

hoverで指定している画像　というか hover無しのaの設定はhoverで引き継がれるので同じである場合は指定しなくて大丈夫だよ。
すると・・・

#category a{
display: block;
background-image:url("縦、横１０ｐｘの画像");
background-repeat:no-repeat;
background-position:left;
padding:5px 12px;
width:140px;
border: 1px solid red;
background-color:blue;
text-decoration:none;
}
#category a:hover{
background-color:green;
border-color:black;
}

で大丈夫な筈・・・・・

お礼

早急なご回答、誠にありがとうございます。
さっそく、SAYKAさんの方法で試してみました。

ＣＳＳが簡略化でき、たいへんうれしく思います。

しかし、１カ所「background属性」が使われているためか、「ページが表示されました」という表記は変わりませんでした。