Question

我有一个问题，我正在制作一个画廊PHP脚本并需要帮助，我有一张照片，它周围有一个浅灰色的边框，如果有一个鼠标悬停事件，我希望边框变灰。我怎么能这样做？

提前致谢

Answer 1

使用：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支持，请深呼吸check this out（感谢@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>

此方法有多种变体 - 我建议您点击该网站，查找可能更适合您情况的其他选项。

Answer 2

您可以使用:hover伪类。

例如：

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

<a href="..." class="bordered"><img src="..." /></a>

Answer 3

使用.mypictureclass：悬停以应用边框。

但是也可以在图片显示类中应用透明边框，以避免在添加边框时跳转。

Answer 4

好吧伙计我已经得到了XD，因为我说，我是一个html人，我只是发现它是如何工作的，它使用了CSS作为风格，所以我尝试了很多东西，而且，我只是制作了imagethumbnail-tag的副本并更改了bordercoler并将标题编辑为imagethumbnail：hover

谢谢你们：）

Answer 5

<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中正确显示＆amp;显示图像周围的边框。这是一个鼠标悬停图像的样本。

    <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>

鼠标悬停时更改图像边框

5 个答案: