Изменить границу изображения при наведении курсора
Ответы 5
Вы можете использовать псевдокласс : hover.
Например:
<style>
a.bordered:hover img {
border: solid 2px grey;
}
</style>
<a href = "..." class = "bordered"><img src = "..." /></a>
Используйте псевдокласс: 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>
Есть несколько вариантов этого подхода - я предлагаю вам перейти на этот сайт, чтобы увидеть другие варианты, которые могут быть более подходящими для вашей ситуации.
используйте .mypictureclass: наведите указатель мыши, чтобы применить границу.
но также примените прозрачную границу к классу отображения изображения, чтобы избежать скачка при добавлении границы.
хорошо, ребята, у меня есть XD, как я уже сказал, я парень HTML, и я только что узнал, как это работает, он использовал CSS в качестве стиля, поэтому я много чего пробовал, и, к удивлению, я только что сделал копию тега imagethumbnail-tag и изменил границу и отредактировал заголовок на imagethumbnail: hover
спасибо вам всем :)
<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>