Как сделать при hover, чтобы данный блок расширялся

10.10.2012, 18:29. Показов 2149. Ответов 0

Метки нет (Все метки)

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

HTML5
1
<div id="ugolkrug2"><div class="ugolkrug3"><p><a href="#">Офисный переезд</a></p> </div> <div id="strelka1"></div></div>

CSS
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
27
28
29
30
#ugolkrug2{
     top:60px;
     left:1px;
     width:67%; 
     height:30%; 
     background:#B4B5B9 ;
     box-shadow: 0 0 50px #40310a;
     box-shadow: 0 0 20px #40310a;/*,0px 0px 5px #40310a inset*/
  }
 
 
 .ugolkrug3{
      color:black;
      font-size:14px;
      font-style:Tahoma;
      position: relative;
      top:-75px;
      float:left;
      left:5%;
 }
 
#strelka1{
     background-image:url('img/skmenu.png');
     width:10px; 
     height:5px;
     top:-69px;
     position: relative;
     float:right;
     right:4%;
 }

Как сделать при hover, чтобы данный блок расширялся, цвет ссылки становился белым, а skmenu.png, менялась на skhmenu.png - прикреплены к архиву.

У меня только так получается

CSS
1
2
3
4
5
6
7
8
#ugolkrug2:hover{
     top:60px;
     left:1px;
     width:69%; 
     height:32%; 
     background:#B4B5B9 ;
     color:#fff;
  }

Вложения

img.zip (670 байт, 5 просмотров)

IT_Exp

Эксперт

34794 / 4073 / 2104

Регистрация: 17.06.2006

Сообщений: 32,602

Блог

10.10.2012, 18:29

Ответы с готовыми решениями:

Как сделать чтобы при hover увеличивались два дива?
<link rel="stylesheet" href="css.css" type="text/css" /> <div id="knopki"> <div id="knopka"> <div id="ugolkrug1"> <div...

Создание тени тегу li в списке ul при hover, Как сделать так чтобы тень перекрывала соседние элементы?
в общем все бы ничего, да только тень ни перекрывает соседний li, смотрите как ведет себя последний тэг li, тень хорошо видна со всех...

Как сделать, чтобы при добавлении цифр блок увеличивался в ширину
А еще один последний вопрос, можно как-то сделать так, чтобы например при добавлепнии еще цифр блок увеличивался в ширину и цифры...

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

BasicMan

Эксперт

29316 / 5623 / 2384

Регистрация: 17.02.2009

Сообщений: 30,364

Блог

10.10.2012, 18:29

Помогаю со студенческими работами здесь

Как сделать, чтобы при наведении на блок уменьшался box-shadow фона?
Здравствуйте , суть в том что когда делал эффекты при наведение на блок , представьте такой квадратик , он менял цвет , ну это стандарт и...

Как сделать блок шире при наведении, чтобы не двигались остальные элементы?
Как это называется? Я добавил #id:hover { z-index: 500; } - это не работает

Как сделать чтобы при наведении на блок 1 скрывался навсегда блок 2
Здравствуйте! #block_1:hover #block_2{display:none;} Сейчас у меня так стоит, навожу мышь на блок 1 - блок 2 исчезает пока мышка на...

Как мне сделать так, чтобы данный текстовый файл был открыт один раз при запуске программы и закрыт при закрытии программы?
Привет! Возник следующий вопрос. Программа состоит из основного окна Form1 и нескольких Unit. По таймеру в Form1 запускается один из...

Как сделать кнопки на подчинённой форме, чтобы при нажатии на них менялись данный в материнской форме?
Подскажите как сделать кнопки на подчинённой форме, чтобы при нажатии на них менялись данный в материнской форме? Тоесть у меня есть поле...

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .

Наверх