带边框的图像链接

本文介绍了带边框的图像链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在寻找一种方法在这个 链接中围绕图像放置一个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不支持悬停效果？） 问候， ThomasHi,I''m looking for a way to put a 1px solid border around the image in thislink:<a href="some.html"><img src="some.gif"></a>Well, that, by itself, is simple. However, I would like to have a differentborder color for a mouse hover effect over the image. With Mozilla, I cansimply specify img:hover {...}, but IE allows hover only for <a>. So now I''mlooking 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 awidth:0px, to make IE show the border (tested IE5). But I wasn''t able tomake the <a>-border appear in Mozilla.The following works with IE5, but not Mozilla (not even when I remove thewidth: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 inthe <a> element instead, is there a way to have NN4 display it properly -even though NN4 will not support the hover effect?)Greetings,Thomas推荐答案 对不起，不能测试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 withborders like this, which works in IE, NS 7, Opera, Mozilla''sFirebird..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--ElsA mente é egual á uma paraqueda; funciona melhor aberta. 不幸的是，绿色的悬停效果不会在IE5上显示 - 我只是 检查它。这就是为什么我正在寻找一种方法将边框放在< a> 元素而不是< img>就像你的代码一样。仍然，组合 " a：hover img"很有意思。Unfortunately, the green "hover" effect does not show on IE5 - I justchecked 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. 不幸的是，绿色的悬停 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.htmlin IE 5. If you hover over the pics, you don''t see apurpleish border??It is the start (only testing a few pages yet) of a newversion 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 onthe pics inside the table, not the images outside it...--ElsA mente é egual á uma paraqueda; funciona melhor aberta. 这篇关于带边框的图像链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！