CSS: изменить внешний вид кнопки при наведении

Question

У меня есть кнопка на моей веб-странице с классом "btnNewL1". мой класс CSS как ниже

.btnNewL1
{

background: url(../images/btnbgnew.png);
border:1px solid #818181;
padding-left:3px;
padding-right:3px;
font-family:Arial;
font-size:12px;
padding-top:1px;
padding-bottom:1px;
}

Когда пользователь наводит курсор на кнопку, я хочу изменить его внешний вид, например, изменить изображение bg, изменить цвет границы и т. Д. Я хочу сделать это будет сам CSS. и это должно поддерживаться IE6 IE 7, Firefox

Как это сделать?

Answer 1

К сожалению : псевдо-селектор при наведении курсора IE6 не поддерживается ни на каком другом элементе, кроме <a>.

Если вы хотите реализовать: hover в IE6, вы можете:

a) Если возможно, измените <input class="btnNewL1" type="button" value="click me!" /> на <a class="btnNewL1" href="#">click me!</a>. Вам нужно будет добавить display: block и несколько других правил CSS. Это просто «симулирует» кнопку с помощью тега <a>. Это не идеальное решение, потому что иногда вы должны использовать правильный <input> (т.е. при использовании элементов управления asp.net).

b) Для обхода проблемы используйте javascript, например, в jQuery:

<script type="text/javascript">
$(document).ready(function(){
    $("input.btnNewL1").mouseover(function(){
      $(this).toggleClass('buttonSelected');
    }).mouseout(function(){
      $(this).toggleClass('buttonSelected');
    });
});
</script>
<input type="button" value="click me!" class="btnNewL1" />

c) Сверните ваш код так:

<a class="acont" href="#"><input type="button" value="click me!" /></a>

Таким образом, вы сможете использовать CSS:

.acont:hover input { background:red; }

Это сделает работу, но, насколько я помню, это недопустимый HTML (<input> не должен быть помещен в тег <a>)

Какой из них ты выберешь - решать тебе. Суть этого поста опять-таки: : псевдоселектор hover может использоваться в IE6 только для элементов привязки

Answer 2

Взгляните на псевдоклассы

.btnNewL1:hover{
    background: url(../images/different.png);
}

Answer 3

Вы хотите псевдокласс :hover. Используйте .btnNewL1:hover { ... } для стилей наведения мыши.

См. Также спецификацию CSS2 для получения дополнительной информации о псевдоклассах.

Answer 4

Этот SO вопрос «Как использовать« зависание »в CSS» может помочь вам.

Я думаю, что вы ищете для :hover класса.

Вот пример в w3schools .

Пример для цвета, но я считаю, что вы можете сделать это с другими стилями.

Answer 5

Объедините два изображения в одно, а затем измените положение фона.

CSS спрайт

CSS-спрайты: поцелуй смерти при разрезании изображения