带边框的图像链接 [英] Image Link with Border
问题描述
我正在寻找一种方法在这个
链接中围绕图像放置一个1px实线边框：
< a href =" some.html">< img src =" some.gif">< / a>
嗯，这本身就是很简单。但是，我想为图像上的鼠标悬停效果设置不同的
边框颜色。使用Mozilla，我可以简单地指定img：hover {...}，但IE只允许悬停在< a>。所以现在我要求b $ b寻找一种方法为我的< a>设置边框。元素而不是
< img>，但在这里我遇到了一些问题。看来，我必须指定一个
宽度：0px，以使IE显示边框（测试IE5）。但是我无法使用b $ b使得< a> -border出现在Mozilla中。
以下适用于IE5，但不适用于Mozilla（即使我删除了
宽度：0px）。
< a href =" some.html" class =" imageborder">< img src =" some.jpg" border =" 0">< / a>
..imageborder
{
宽度：0px;
光标：手;
边框：1px纯黑色;
}
..imageborder：悬停
{
边框：1px纯红色;
}
我该怎么做使其与全部兼容浏览器？
（PS：NN4不喜欢图像旁边的边框，但是当我将边框放在
而不是< a>元素时，有没有办法让NN4正确显示它？
即使NN4不支持悬停效果？）
问候，
Thomas
Hi,
I''m looking for a way to put a 1px solid border around the image in this
link:
<a href="some.html"><img src="some.gif"></a>
Well, that, by itself, is simple. However, I would like to have a different
border color for a mouse hover effect over the image. With Mozilla, I can
simply specify img:hover {...}, but IE allows hover only for <a>. So now I''m
looking for a way to set the border for my <a> element rather than the
<img>, but here I encounter some problems. It seems, I must specify a
width:0px, to make IE show the border (tested IE5). But I wasn''t able to
make the <a>-border appear in Mozilla.
The following works with IE5, but not Mozilla (not even when I remove the
width:0px).
<a href="some.html" class="imageborder"><img src="some.jpg" border="0"></a>
..imageborder
{
width:0px;
cursor:hand;
border:1px solid black;
}
..imageborder:hover
{
border:1px solid red;
}
What can I do to make this compatible with "all" browsers?
(P.S.: NN4 doesn''t like borders around images, but when I put the border in
the <a> element instead, is there a way to have NN4 display it properly -
even though NN4 will not support the hover effect?)
Greetings,
Thomas
推荐答案
Thomas Mlynarczyk写道：
Thomas Mlynarczyk wrote:
我正在寻找一种方法在这个
链接中围绕图像放置1px实线边框：
< a href =" some.html">< img src =" some .gif">< / a>
嗯，这本身就很简单。但是，我想为图像上的鼠标悬停效果设置不同的边框颜色。使用Mozilla，我可以简单地指定img：hover {...}，但IE只允许悬停于< a>。所以我现在正在寻找一种方法为我的< a>设置边框。元素而不是
< img>，但在这里我遇到了一些问题。看来，我必须指定一个宽度：0px，使IE显示边框（测试IE5）。但是我无法让< a> -border出现在Mozilla中。
以下适用于IE5，但不适用于Mozilla（即使我删除了
width：0px）。
< a href =" some.html" class =" imageborder">< img src =" some.jpg" border =" 0">< / a>
.imageborder
{
宽度：0px;
光标：手;
边框： 1px纯黑色;
}
.imageborder：悬停
{
边框：1px纯红色;
}
我可以做到与全部兼容浏览器？
（PS：NN4不喜欢图像边框，但当我把边框放在< a>元素中时，有没有办法让NN4显示它正确 -
即使NN4不支持悬停效果？）
Hi,
I''m looking for a way to put a 1px solid border around the image in this
link:
<a href="some.html"><img src="some.gif"></a>
Well, that, by itself, is simple. However, I would like to have a different
border color for a mouse hover effect over the image. With Mozilla, I can
simply specify img:hover {...}, but IE allows hover only for <a>. So now I''m
looking for a way to set the border for my <a> element rather than the
<img>, but here I encounter some problems. It seems, I must specify a
width:0px, to make IE show the border (tested IE5). But I wasn''t able to
make the <a>-border appear in Mozilla.
The following works with IE5, but not Mozilla (not even when I remove the
width:0px).
<a href="some.html" class="imageborder"><img src="some.jpg" border="0"></a>
.imageborder
{
width:0px;
cursor:hand;
border:1px solid black;
}
.imageborder:hover
{
border:1px solid red;
}
What can I do to make this compatible with "all" browsers?
(P.S.: NN4 doesn''t like borders around images, but when I put the border in
the <a> element instead, is there a way to have NN4 display it properly -
even though NN4 will not support the hover effect?)
对不起，不能测试NN4，但我制作了我的图片链接与
这样的边界，适用于IE，NS 7，Opera，Mozilla的
Firebird ..
a ：link img {text-decoration：none;
border-color：red;
border-width：2px;
}
a：访问img {text-decoration：none;
border-color：yellow;
border-width：2px;
}
a：悬停img {text-decoration：none;
border-color：green;
border-width：2px;
}
hth
-
Els
menteéegualáumaparaqueda; funciona melhor aberta。
Sorry, can''t test for NN4, but i make my image links with
borders like this, which works in IE, NS 7, Opera, Mozilla''s
Firebird..
a:link img{text-decoration: none;
border-color: red;
border-width: 2px;
}
a:visited img{text-decoration: none;
border-color: yellow;
border-width: 2px;
}
a:hover img{text-decoration: none;
border-color: green;
border-width: 2px;
}
hth
--
Els
A mente é egual á uma paraqueda; funciona melhor aberta.
同时出现了Els：
Also sprach Els:
对不起，不能测试NN4，但是我使用这样的边框制作我的图像链接，它适用于IE，NS 7，Opera，Mozilla的
Firebird ..
a：链接img {text-装饰：无;
border-color：red;
border-width：2px;
}
a：访问img {text-decoration：none;
border-color：黄色;
border-width：2px;
}
a：悬停img {text-decoration：none;
border-color：绿色;
border-width：2px;
}
Sorry, can''t test for NN4, but i make my image links with
borders like this, which works in IE, NS 7, Opera, Mozilla''s
Firebird..
a:link img{text-decoration: none;
border-color: red;
border-width: 2px;
}
a:visited img{text-decoration: none;
border-color: yellow;
border-width: 2px;
}
a:hover img{text-decoration: none;
border-color: green;
border-width: 2px;
}
不幸的是，绿色的悬停效果不会在IE5上显示 - 我只是
检查它。这就是为什么我正在寻找一种方法将边框放在< a>
元素而不是< img>就像你的代码一样。仍然，组合
" a：hover img"很有意思。
Unfortunately, the green "hover" effect does not show on IE5 - I just
checked it. That''s why I was looking for a way to put the border in the <a>
element instead of the <img> as your code does. Still, the combination
"a:hover img" is interesting.
Thomas Mlynarczyk写道：
Thomas Mlynarczyk wrote:
同时也是Els：
Also sprach Els:
抱歉，不能测试NN4，但是我的图像链接是这样的边框，适用于IE，NS 7，Opera，Mozilla的 Firebird ..
a：链接img {text-decoration：none;
border-color：red;
border-width：2px;
}
a：访问img {text-decoration：none;
border-color：yellow;
border-width：2px;
}
a：悬停img {text-decoration：none;
border-color：green;
border-width：2px;
}
Sorry, can''t test for NN4, but i make my image links with
borders like this, which works in IE, NS 7, Opera, Mozilla''s
Firebird..
a:link img{text-decoration: none;
border-color: red;
border-width: 2px;
}
a:visited img{text-decoration: none;
border-color: yellow;
border-width: 2px;
}
a:hover img{text-decoration: none;
border-color: green;
border-width: 2px;
}
不幸的是，绿色的悬停 IE5上没有显示效果 - 我只是检查了它。这就是为什么我正在寻找一种方法将边框放在< a>
元素而不是< img>就像你的代码一样。仍然，组合
a：hover img很有意思。
Unfortunately, the green "hover" effect does not show on IE5 - I just
checked it. That''s why I was looking for a way to put the border in the <a>
element instead of the <img> as your code does. Still, the combination
"a:hover img" is interesting.
这个我不明白。看看
http：// www .mediatech.nl / ~rachel / Fram ... chel / live.html
IE 5中的
。如果你将鼠标悬停在图片上，你就看不到了>
紫色边框??
它是一个新的
版本的网站的开始（仅测试了几页）我实际上是用IE制作的5！
如果有效，请查看样式表...
我用过td a：hover img，因为我只想在
桌子里面的图片，而不是它外面的图片...
-
Els
Amenteéegualáumaparaqueda; funciona melhor aberta。
This I don''t get. Have a look at
http://www.mediatech.nl/~rachel/Fram...chel/live.html
in IE 5. If you hover over the pics, you don''t see a
purpleish border??
It is the start (only testing a few pages yet) of a new
version of a site which I actually made using IE 5!
If it works, check out the stylesheet...
I used "td a:hover img", because I wanted the border only on
the pics inside the table, not the images outside it...
--
Els
A mente é egual á uma paraqueda; funciona melhor aberta.
这篇关于带边框的图像链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
