Html 在鼠标悬停时更改图像边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/466449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change image-border on mouseover
提问by Michael Haren
i have a problem, i'm working on a gallery php script and need help, i have a picture, it has a lightgray border around, and if theres a mouseover event, i want the border to turn gray. how can i do that?
我有一个问题，我正在处理一个画廊 php 脚本并需要帮助，我有一张图片，它周围有一个浅灰色边框，如果有鼠标悬停事件，我希望边框变成灰色。我怎样才能做到这一点？
thanks in advance
提前致谢
回答by Michael Haren
Use the :hover pseudo class. For example:
使用 :hover 伪类。例如：
<html>
<head>
<style>
IMG.HoverBorder {border:5px solid #eee;}
IMG.HoverBorder:hover {border:5px solid #555;}
</style>
</head>
<body>
<img class="HoverBorder" src="test.png" />
</body>
</html>
The above code works well on all sane browsers I have access to. If you need IE 6 support, take a deep breath and check this out(thanks to @Brian Kim for reminding me about IE6):
上面的代码在我可以访问的所有正常浏览器上运行良好。如果您需要 IE 6 支持，请深呼吸并检查一下（感谢 @Brian Kim 提醒我有关 IE6 的信息）：
<html>
<head>
<style>
a:hover{ background-color:white; }
a:link img, a:visited img{ border:5px solid #eee; }
a:hover img{ border:5px solid #555; }
</style>
</head>
<body>
<a href="#"><img class="HoverBorder" src="03 messed up status log edit IE6.png" /></a>
</body>
</html>
There are several variants on this approach--I suggest you click through to that site for other options that might be more suitable to your situation.
这种方法有多种变体——我建议您点击该站点以获取可能更适合您情况的其他选项。
回答by DavGarcia
回答by GeekyMonkey
use .mypictureclass:hover to apply the border.
使用 .mypictureclass:hover 应用边框。
but also apply a transparent border to the picture display class to avoid it jumping when the border is added.
还要给图片显示类应用透明边框，避免添加边框时跳转。
回答by GeekyMonkey
okay dudes i've got it XD as i said, i'm a html guy, and i just found out how it works, it used a CSS as style, so i tried much things, and, surprise, i just made a copy of the imagethumbnail-tag and changed the bordercoler and edited the title to imagethumbnail:hover
好吧，伙计们，正如我所说，我已经得到了 XD，我是一个 html 人，我刚刚发现它是如何工作的，它使用 CSS 作为样式，所以我尝试了很多东西，而且，令人惊讶的是，我只是做了一个副本imagethumbnail-tag 并更改了 bordercoler 并将标题编辑为 imagethumbnail:hover
thank y'all as well :)
也谢谢大家:)
回答by GeekyMonkey
<style type="text/css">
body,td,th {
font-size: 14px;
color: #FFF;
}
body {
background-color: #000;
}
a {
font-size: 14px;
color: #FFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #CCC;
}
a:active {
text-decoration: none;
color: #FC3;
}
a:img,
a:link img,
a:visited img,
a:focus img,
a:hover img,
a:active img {
border: none;
}
</style>
The code follows everything I've seen so far, but still isn't displayed in IE correctly & shows borders around the images. This is a sample of one of the mouseover images.
代码遵循我目前看到的所有内容，但仍然没有在 IE 中正确显示并在图像周围显示边框。这是鼠标悬停图像之一的示例。
<a href="index.html">
<img src="images/buttons/home.png" alt="Home" width="216" height="44"
onmouseover="this.src='images/buttons/home_.png'" onmouseout="this.src='images/buttons/home.png'"></a>
