2

我有一个问题，我正在处理一个画廊 php 脚本并且需要帮助，我有一张图片，它周围有一个浅灰色的边框，如果有鼠标悬停事件，我希望边框变成灰色。我怎样才能做到这一点？

提前致谢

4

5 回答 5

6

使用 :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>

上面的代码在我可以访问的所有健全的浏览器上运行良好。如果您需要 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>

这种方法有几种变体——我建议您单击该站点以获取可能更适合您的情况的其他选项。

于 2009-01-21T18:42:59.477 回答
1

您可以使用:hover伪类。

例如：

<style>
a.bordered:hover img {
   border: solid 2px grey;
}
</style>

<a href="..." class="bordered"><img src="..." /></a>
于 2009-01-21T18:42:08.167 回答
0

使用 .mypictureclass:hover 应用边框。

还要给图片显示类应用透明边框，避免添加边框时跳动。

于 2009-01-21T18:43:52.953 回答
0

好的，伙计们，我知道了 XD，正如我所说，我是一个 html 人，我刚刚发现它是如何工作的，它使用 CSS 作为样式，所以我尝试了很多东西，而且，令人惊讶的是，我只是做了一个副本的 imagethumbnail-tag 并更改了 bordercoler 并将标题编辑为 imagethumbnail:hover

也谢谢大家:)

于 2009-01-21T20:55:08.697 回答
0 
<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>

该代码遵循我到目前为止所看到的所有内容，但仍未正确显示在 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>
于 2009-06-17T21:08:45.067 回答