Почему мое изображение не меняется при наведении на него курсора? - PullRequest
Новая
       11

Почему мое изображение не меняется при наведении на него курсора?

0 голосов
/ 04 апреля 2010

Вот мой HTML. 

<html>
    <head>
        <style type="text/css">
            .button {
                background: url('images/1.png');
            }

            .button:hover {
                background: url('images/2.jpg');
            }
        </style>
    </head>
    <body>
        <img class="button" src="images/1.png">
    </body>
</html>

Файлы присутствуют, но все равно не работают.Что я делаю не так?

Ответы [ 9 ]

5 голосов
/ 04 апреля 2010

Стандартный метод CSS: 

input.mybutton { background-image: url('button.jpeg'); }
input.mybutton:hover { background-image: url('selectedButton.jpeg'); }

Используя JavaScript, вы можете перезаписать .src изображения: 

imageElement.src = 'selectedButton.jpeg';
2 голосов
/ 04 апреля 2010 
<img src="button.jpeg" onmouseover="this.src='selectedButton.jpeg'" onmouseout="this.src='button.jpeg'"/>
1 голос
/ 04 апреля 2010

Я использовал тег h1. Я протестировал следующий код в IE8, Firefox, GoogleChrome, и он работает, нам просто нужно правильно добавить тип документа: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.button {
    background: url('images/1.jpg');
    height: 400px;
    width: 400px;
}

.button:hover {
    background: url('images/2.jpg');
}
</style>
</head>
<body>
<h1 class="button"></h1>
</body>
</html>
1 голос
/ 04 апреля 2010

Используйте JavaScript, чтобы сделать это. Используйте onmouseover и onmouseout события для обработки этого.

Если вы можете использовать jQuery, тогда вы можете использовать событие hover. 

$("img.button").hover(function(){
    $(this).attr("src","path of image on mouse over");
},
function(){
    $(this).attr("src","path of image on mouse out");
});
1 голос
/ 04 апреля 2010

Используйте тег a, чтобы обернуть изображение. 

<hmtl>
<head>
    <style type="text/css">
        a.button{
            background: url('images/1.png');
                            display:block;
                            width: *width*;
                            height: *height*;
        }

        a.button:hover{
            background: url('images/2.jpg');
        }
    </style>
</head>
<body>
<a class="button"></a>
</body>

Редактировать: Я просто понимаю, что вы пытаетесь заменить фоновое изображение под вашим изображением ....

один вариант, который у вас есть, это использовать javascript. но если вы хотите использовать только CSS, а также хотите использовать это изображение в качестве элемента управления, отредактированное выше решение хорошо.

1 голос
/ 04 апреля 2010

Если вы можете использовать jQuery в своем приложении, то это будет довольно просто. При наведении курсора на кнопку просто поменяйте местами фоновое изображение. Следующий пример кода делает это для элемента div: - 

<div class="title"/>

 $(document).ready(function () {
            $('div.title').mouseover(function () {
                $(this).css("background-image", "url('Forest Flowers.jpg')");
            });
        });
1 голос
/ 04 апреля 2010

Вероятно, лучший способ - использовать css и установить фоновое изображение элемента на основе свойства hover.

0 голосов
/ 04 апреля 2010

Кнопки не имеют состояния наведения. Возможно, вы захотите попробовать теги A (link) и установить там фон.

0 голосов
/ 04 апреля 2010

Изображения обычно не имеют фоновых изображений. Используйте другой элемент, и не относительные пути также будут хорошей идеей.

...