Изменение текста/изображения при зависании

Question

Heyo! Im работает с некоторыми CSS, и у меня возникают проблемы с тем, чтобы вещи менялись при наведении.

.wclan{ 
    background: url(icon url here); 
    width: 23%; 
    height: 150px; 
    position: absolute; 
    top:0px; 
    left: 25.5%; 
    z-index: absolute; 
    text-align: center; 
    border-radius: 0px; 
    font-size: 7px; 
} 

.wclan:hover{ 
    background: #d710ca; 
    width: 100%; 
    height: 150px; 
    position: absolute; 
    top:0px; 
    left: 0%; 
    z-index: 3000; 
    text-align: center; 
    border-radius: 0px; 
    font-size: 7px; 
} 

Im ищет изображение для изменения при наведении. Отображение предварительного «значка», если вы хотите, и когда вы наведете его, он изменится, чтобы отобразить информацию. Проблема заключается в том, как своевременно найти размер изображения, который работает со всеми размерами (поскольку мой код использует проценты, он может быть разным для каждого компьютера), а также его изменение. Я подумывал обойти эту проблему с фоновым URL-адресом, но мне кажется, что это может быть проще, если я просто использую PNG в HTML. Я просто не знаю, как заставить PNG изменять при наведении, например остальная часть кода.

Надеюсь, это имело смысл. Благодаря !

Answer 1

Все выглядит хорошо. Если вы хотите изменить изображение при наведении, просто укажите другой путь фонового изображения при наведении. Посмотрите ниже:

.wclan{ background-image: url(icon url 1); } 

/*Change image url on hover*/ 

.wclan:hover{ background-image: url(icon url 2); } 

Answer 2

Я добавил код поля и удалил ссылку%. Если значение равно «0», вам не нужно следовать ему с суффиксом типа «px» или «%». Это может отлично работать с позицией: relative ;, потому что маржа «auto» удерживает ее привязанной к центру экрана.

body, .wclan {background: url(icon url here); width: 23%; height: 150px; position: absolute; top:0; left: 0;margin:0 auto; z-index:-1; text-align: center; border-radius: 0px; font-size: 7px; 
} 

.wclan:hover {background-color: #d710ca; width: 100%; height: 150px; position: absolute; top:0; left: 0; z-index: 3000; text-align: center; border-radius: 0px; font-size: 7px; 
}