изменить границу изображения при наведении курсора - PullRequest
Новая
       9

изменить границу изображения при наведении курсора

2 голосов
/ 21 января 2009

У меня проблема, я работаю над сценарием php галереи и мне нужна помощь, у меня есть картинка, вокруг нее светло-серая граница, и если есть событие при наведении курсора, я хочу, чтобы она стала серой. как я могу это сделать?

заранее спасибо

Ответы [ 5 ]

6 голосов
/ 21 января 2009

Используйте псевдо-класс: 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>

Есть несколько вариантов этого подхода - я предлагаю вам перейти на этот сайт, чтобы найти другие варианты, которые могут быть более подходящими для вашей ситуации.

1 голос
/ 21 января 2009

Вы можете использовать псевдокласс : hover .

Например: 

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

<a href="..." class="bordered"><img src="..." /></a>
0 голосов
/ 18 июня 2009 
<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>
0 голосов
/ 21 января 2009

хорошо, парни, у меня есть XD, как я уже сказал, я html-парень, и я только что узнал, как это работает, он использовал стиль CSS, поэтому я много чего перепробовал, и, удивительно, я просто сделал копию тега imagethumbnail-tag, изменил пограничный кулер и отредактировал заголовок на imagethumbnail: hover

спасибо, а также:)

0 голосов
/ 21 января 2009

используйте .mypictureclass: наведите курсор мыши, чтобы применить границу.

, но также примените прозрачную границу к классу отображения изображения, чтобы избежать его скачка при добавлении границы.

...