Изменение картинки при наведении с CSS

      Комментарии к записи Изменение картинки при наведении с CSS отключены

Главная Форумы Программирование Веб программирование Изменение картинки при наведении с CSS

Помечено: , ,

В этой теме 0 ответов, 1 участник, последнее обновление  Васильев Владимир Сергеевич 2 мес., 1 неделя назад.

  • Автор
    Сообщения
  • #3702

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

    Сначала (как уже повелось) выложу код, а позже все объяснения. Это код файла main.css

    /*Зададим начальный стиль для блока с айди img*/
    #img
    {
      width:100px;
      height:100px;
      background-image:url("img1.png");
    }
    /*Этот стиль будет применен после наведения
    мышью на блок
    */
    #img:hover
    {
      background-image:url("img2.png");
    }
    /*
    А этот стиль будет применен
    после того как мышь будет убрана
    */
    #img:after
    {
      background-image:url("img1.png");
    }

    А теперь сам html каркас:

    <html>
      <head>
        <link rel="stylesheet" href="main.css" type="text/css" />
      </head>
    
      <body>
        <div id="img">
        </div>
      </body>
    </html>

    Вроде в комментариях к коду все объяснил, но все же еще немного информации не помешает 😉

    Здесь все меняется псевдоклассами :hover и :after. Значение у них такое:

    • hover — это псевдокласс, который используется для определения стиля элемента, когда курсор мыши располагается над ним. Иными словами, то какой стиль задать при наведении мыши. Именно им, мы можем поменять картинку на css, при наведении мыши.
    • after — это псевдокласс, который используется наоборот, нежели hover. То есть применяет стиль к элементу, когда курсор мыши уводится с объекта.

    В нашем примере мы меняли не картинку, а фон у блока.

Для ответа в этой теме необходимо авторизоваться.