Изменение фонового изображения на ролловере с помощью CSS

Question

Я пытаюсь заставить свой div изменить свой фон на rollover, но я бы хотел избежать использования JavaScript.

Вот мой код:

<style type="text/css">

 .rollover a {     
        display : block;
        width : 200px;
        height : 200px;             
        background-image : url( image1 ); 
    }

    .rollover a:hover { 
        display : block;
        width : 200px;
        height : 200px;
        background-image : url( image2 ); 
    }

</style>

<div class="rollover"> 
    <a href="/site">sitelink</a> 
</div>

Он работает нормально, но изображение обрезается.

Мне нужно показать полное изображение размером 200px, 200px.

Answer 1

Используйте background-size, а также всегда рекомендуется использовать background-repeat.

background-size: 100% 100%;
background-repeat: no-repeat;

Answer 2

Этот пример хорошо работает для меня, но проблема в том, когда я хочу использовать другое изображение при наведении курсора. Проблема с позиционированием второго ролловера изображения. Я попытался изменить дисплей: блок; встроенный блок, но это не помогло.

 .rollover1 a {     
            display : block;
            width : 200px;
            height : 200px;             
            background-image : url( image1 ); 
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-left: 150px;           
            margin-top: 100px; 
        }
     .rollover1 a:hover { 
        display : block;
        width : 200px;
        height : 200px;
        background-image : url( image2 ); 
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-left: 150px;          
        margin-top: 100px; 
    }

Редактировать: я понял. Я забыл определить position:absolute;