relタグにリンクスタイルを指定したい

質問

いつもお世話になっております。
初心者なのですが試行錯誤をしつつWEBを制作しています。
jQueryのFancyboxを使って画像の表示をさせているのですが、その画像に対してリンクスタイル（マウスオーバーで画像に枠線表示）を指定したいのです。
コードの一部として以下のようになっています。

<a rel="press_group" href="image/press_06.jpg"><img src="image/press_06.gif" width="386" height="546" alt="プレス_06" /></a>
<a rel="press_group" href="image/press_07.jpg"><img src="image/press_07.gif" width="340" height="241" alt="プレス_07" /></a>

このような場合どのようにスタイルシートを書けばいいのでしょう？
Fancybox自体は正常に動いています。
何卒ご教授よろしくお願いいたします。

回答No.3

ORUKA1951 · ベストアンサー

＞普通に枠線の表示を指定するとレイアウトが崩れてしまったため、
　これは、要素のサイズはpadding辺の内側とされているからです。
　width:100pxと指定してあるブロックのpaddingが10px,borderが20pxだとborderの外側は、100px+2×10px+2×20pxとなるからです。
　この場合border-color:transparentで透明色を指定しておかなければならないですね。

＞画像の周りを全て枠線で囲みたいのですが、
　だとしたら、「borderは画像(img要素)」につけなければならないですよ。IEにはバグがあってa要素すべてに枠がつきません。
a[href="image/press_06.jpg"]{
margin: -2px;
}
a[href="image/press_06.jpg"] img{
border: solid 2px transparent;
}
a[href="image/press_06.jpg"]:hover img{
border-color:red;
}

お礼

お返事が遅れてしまって申し訳ございません。
なるほど、バグがあるのですね。
ご指摘の通り修正致しましたら、すべて枠が表示されるようになりました。
ありがとうございました！

回答No.2

ORUKA1951

属性セレクタを使います。
a[rel="press_group"]:hover{}
a[href="image/press_06.jpg"]:hover{}
img[src="image/press_06.gif]{}
img[width="386"]{}
img[height="546"]{}
img[alt="プレス_06"]{}
だろうが、お好きなように・・
5.8 属性セレクタ（Attribute selectors）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#attribute-selectors )

補足

ご回答ありがとうございます。
添付した画像をご参照して頂きたいのですが、左端の黄色い四角の下部のみに指定したブルーの枠線が表示されます。因にスタイルの指定をしたのは左端の四角のみです。(問題が起こっている部分を赤線で囲んでいます)
画像の周りを全て枠線で囲みたいのですが、何が原因かお分かりになりますでしょうか。

CSSの方は以下のようになっています。
a[href="image/press_06.jpg"]:hover {
margin: -2px;
border: solid 2px #9af;}

普通に枠線の表示を指定するとレイアウトが崩れてしまったため、
http://css-eblog.com/csstricks/mouseover-border-effect.html
こちらのサイトを参考にしました。

回答No.1

play_with_you

relタグって何ぞ？

FancyBoxはリンククリック時に新しい要素を追加して表示しています。
なのでリンクタグの部分をどうしようと何も影響しません。

<div class="fancybox-wrap fancybox-desktop fancybox-type-image fancybox-opened" tabIndex="-1">
<div class="fancybox-skin">
<div class="fancybox-outer">
<div class="fancybox-inner">
<img class="fancybox-image" alt="" src="xxx">
</div>
<a class="fancybox-nav fancybox-prev" title="Previous" href="javascript:;"><span></span></a>
<a class="fancybox-nav fancybox-next" title="Next" href="javascript:;"><span></span></a>
</div>
<a class="fancybox-item fancybox-close" title="Close" href="javascript:;"></a>
</div>
</div>

上記のようなものが追加されるので、「fancybox-image」あたりに設定すればいいんじゃないでしょうか。

お礼

早速のご回答ありがとうございます！
rel属性ですね、失礼いたしました;
ORUKA1951さんがご教授くださった方法で上手く行きそうなので、そちらで進めていきたいと思います。ありがとうございました。