Я пытаюсь изменить изображение при наведении курсора на другое изображение, и я не могу заставить его реагировать. Я пытался установить высоту в авто, но это не исправляет. Спасибо!
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> .container { position: relative; width: auto; } .responsive { background-repeat: no-repeat; width: 100% ; height: auto; display: inline-block ; background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos2.jpg'); } .responsive:hover { background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos1.jpg'); } </style> </head> <body> <a href="http://www.corelangs.com" class="responsive" title="Corelangs link"></a> </body> </html>
Вам нужно явно установить размер
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> .container { position: relative; width: auto; } .responsive { width: 100px; height: 100px; display: inline-block ; background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos2.jpg'); background-repeat: no-repeat; } .responsive:hover { background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos1.jpg'); } </style> </head> <body> <a href="http://www.corelangs.com" class="responsive" title="Corelangs link"></a> </body> </html>
, но есть способ сделать это, не зная размера.Хотя размер изображения в img src будет равен (на основе этой записи )
img
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> .container { position: relative; width: auto; } .responsive { background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos2.jpg'); background-repeat: no-repeat; display: inline-block; } .responsive:hover { background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos1.jpg'); } </style> </head> <body> <a href="http://www.corelangs.com" title="Corelangs link"><div class="responsive"><img style="visibility: hidden;" src="http://laurasbdar.com/wp-content/uploads/2019/04/articulos2.jpg" ></div></a> </body> </html>