鼠标悬停时更改图像边框

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>

Run Code Online (Sandbox Code Playgroud)

上面的代码适用于我有权访问的所有理智浏览器.如果您需要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>

Run Code Online (Sandbox Code Playgroud)

这种方法有几种变体 - 我建议您点击该网站,查找可能更适合您情况的其他选项.

归档时间：	16 年，8 月前
查看次数：	28081 次
最近记录：	16 年，3 月前