Как такое можно сделать?

@tolya11 · Регистрация: 21.02.2011

Студворк — интернет-сервис помощи студентам

Здравствуйте , на сайте http://www.genvik.ru/ увидел вот такой эффект :

при наведении курсора все меняется, что то никак понять не могу как это сделано , буду рад за помощь

@МаксимТ · 17.08.2012, 15:02

css:hover
при наведении мышки можно указать стиль

@tolya11 · 17.08.2012, 15:45 **[ТС]**

А можно поподробней , только начинаю изучать , пока не все понимаю

@МаксимТ · 17.08.2012, 16:14

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #test
            {
               border-width: 1px;
               border-style:solid;
               border-color:black;
               color:red;
               width:200px;
            }
            #test:hover
            {
                border-color:red;
                background-color:yellow;
                color:blue;
            }
        </style>
    </head>
    <body>
        <div id="test">mouse !!! mouse!!!</div>
    </body>
</html>

@tolya11 · 17.08.2012, 16:21 **[ТС]**

Спасибо, а еще вопрос, вот чтоб менялась картинка, с рамкой , цвет и т.д. ,как на сайте, это нужно создавать две разных картинки и их прописывать ?

@МаксимТ · 17.08.2012, 16:24

если эффекта нельзя достичь с помощью css, то да, нужны 2 картинки

@tolya11 · 17.08.2012, 16:32 **[ТС]**

большое спасибо
если не трудно а можно на любом примере показать с картинками двумя как и куда все прописывать

@Heleg · 17.08.2012, 20:06

на этом сайте в том месте, откуда вы привели пример меняется только одно изображение - это стрелка. все остальное сделано на css. чтобы посмотреть пример, установите firebug на firefox или chrome. в опере тоже есть неплохой инспектор. даже в ie есть. с помощью инспектора можно посмотреть как там всё сделано. пример хороший для новичка, так как картинка там не меняется, а меняется только её расположение относительно видимой части. это называется css спрайтами. очень важная вещь

@tolya11 · 17.08.2012, 20:09 **[ТС]**

Спасибо , сейчас попробую

Новые блоги и статьи Все статьи Все блоги /
И решил я переделать этот ноут в машину для распределенных вычислений Programma_Boinc 09.11.2025 И решил я переделать этот ноут в машину для распределенных вычислений Всем привет. А вот мой компьютер, переделанный из ноутбука. Был у меня ноут асус 2011 года. Со временем корпус превратился. . .	Мысли в слух kumehtar 07.11.2025 Заметил среди людей, что по-настоящему верная дружба бывает между теми, с кем нечего делить.	Новая зверюга volvo 07.11.2025 Подарок на Хеллоуин, и теперь у нас кроме Tuxedo Cat есть еще и щенок далматинца: Хочу еще Симбу взять, очень нравится. . .	Инференс ML моделей в Java: TensorFlow, DL4J и DJL Javaican 05.11.2025 Python захватил мир машинного обучения - это факт. Но когда дело доходит до продакшена, ситуация не так однозначна. Помню проект в крупном банке три года назад: команда data science натренировала. . .	Mapped types (отображённые типы) в TypeScript Reangularity 03.11.2025 Mapped types работают как конвейер - берут существующую структуру и производят новую по заданным правилам. Меняют модификаторы свойств, трансформируют значения, фильтруют ключи. Один раз описал. . .
Адаптивная случайность в Unity: динамические вероятности для улучшения игрового дизайна GameUnited 02.11.2025 Мой знакомый геймдизайнер потерял двадцать процентов активной аудитории за неделю. А виновником оказался обычный генератор псевдослучайных чисел. Казалось бы - добавил в карточную игру случайное. . .	Протоколы в Python py-thonny 31.10.2025 Традиционная утиная типизация работает просто: попробовал вызвать метод, получилось - отлично, не получилось - упал с ошибкой в рантайме. Протоколы добавляют сюда проверку на этапе статического. . .	C++26: Read-copy-update (RCU) bytestream 30.10.2025 Прошло почти двадцать лет с тех пор, как производители процессоров отказались от гонки мегагерц и перешли на многоядерность. И знаете что? Мы до сих пор спотыкаемся о те же грабли. Каждый раз, когда. . .	Изображения webp на старых x32 ОС Windows XP и Windows 7 Argus19 30.10.2025 Изображения webp на старых x32 ОС Windows XP и Windows 7 Чтобы решить задачу, использовал интернет: поисковики Google и Yandex, а также подсказки Deep Seek. Как оказалось, чтобы создать. . .	Passkey в ASP.NET Core identity stackOverflow 29.10.2025 Пароли мертвы. Нет, серьезно - я повторяю это уже лет пять, но теперь впервые за это время чувствую, что это не просто красивые слова. В . NET 10 команда Microsoft внедрила поддержку Passkey прямо в. . .

@tolya11 1 / 1 / 0 Регистрация: 21.02.2011 Сообщений: 128

	Как такое можно сделать? 17.08.2012, 14:58. Показов 916. Ответов 8 Метки нет (Все метки) Здравствуйте , на сайте http://www.genvik.ru/ увидел вот такой эффект : при наведении курсора все меняется, что то никак понять не могу как это сделано , буду рад за помощь 0

@МаксимТ 47 / 47 / 10 Регистрация: 17.08.2012 Сообщений: 225
	17.08.2012, 15:02
	css:hover при наведении мышки можно указать стиль 0

@tolya11 1 / 1 / 0 Регистрация: 21.02.2011 Сообщений: 128
	17.08.2012, 15:45 [ТС]
	А можно поподробней , только начинаю изучать , пока не все понимаю 0

@tolya11 1 / 1 / 0 Регистрация: 21.02.2011 Сообщений: 128
	17.08.2012, 16:21 [ТС]
	Спасибо, а еще вопрос, вот чтоб менялась картинка, с рамкой , цвет и т.д. ,как на сайте, это нужно создавать две разных картинки и их прописывать ? 0

@МаксимТ 47 / 47 / 10 Регистрация: 17.08.2012 Сообщений: 225
	17.08.2012, 16:24
	если эффекта нельзя достичь с помощью css, то да, нужны 2 картинки 0

@tolya11 1 / 1 / 0 Регистрация: 21.02.2011 Сообщений: 128
	17.08.2012, 16:32 [ТС]
	большое спасибо если не трудно а можно на любом примере показать с картинками двумя как и куда все прописывать 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	17.08.2012, 20:06
	на этом сайте в том месте, откуда вы привели пример меняется только одно изображение - это стрелка. все остальное сделано на css. чтобы посмотреть пример, установите firebug на firefox или chrome. в опере тоже есть неплохой инспектор. даже в ie есть. с помощью инспектора можно посмотреть как там всё сделано. пример хороший для новичка, так как картинка там не меняется, а меняется только её расположение относительно видимой части. это называется css спрайтами. очень важная вещь 0

@tolya11 1 / 1 / 0 Регистрация: 21.02.2011 Сообщений: 128
	17.08.2012, 20:09 [ТС]
	Спасибо , сейчас попробую 0

Опции темы