Ролловер без изменения изображения

Question

У меня есть маленькое уменьшенное изображение, которое я хочу изменить, когда на него наведет курсор мыши.Мне было интересно, есть ли способ сделать это, не меняя изображения на ролловере.Например, с помощью CSS можно изменить прозрачность при наведении курсора?Если у вас есть другие идеи о том, как манипулировать изображением с помощью CSS на ролловере для внесения изменений, я открыт.

Спасибо!

Answer 1

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

Answer 2

В CSS3 есть опция непрозрачности.Таким образом, вам не придется перезагружать изображение, когда оно находится над чем-то.

#div {
  background-image: url('blah.png'); 
}

#div:hover {
  opacity: 0.5;
}

Я не совсем уверен, правильно ли это использовать, поэтому вам следует использовать Google для большего количества примеров.Однако вы должны быть осторожны, потому что еще не все браузеры могут поддерживать CSS3.

Answer 3

Попробуйте использовать стиль :hover для тега. Это может не очень хорошо поддерживаться в ранних версиях IE. Но вы можете сделать что-то вроде:

img {
    border: 1px solid black;
}
img:hover {
    border: 1px solid white;
}