Увеличение картинки при наведении + при наведении на текст

@thinkslow · Регистрация: 23.10.2012

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

Имеется скрипт с использованием jQuery, который при наведении увеличивает картинку, лежащую в блоке.

Кликните здесь для просмотра всего текста

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
27
<style type="text/css">
div.zoom { width:700px; height:212px; position:relative; float:left; margin:13px; }
div.zoom img { position:relative; cursor:pointer; left:0; top:0; width:700px; height:212px; border: 1px solid black;}
div.zoom:hover { overflow:visible; visibility:hidden; }
div.zoom:hover img { visibility:visible; position:absolute; z-index:150; border: none; }
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('.zoom').hover(function(){
      $(this).children('a img').stop(true,true)
            .animate({width:"720px",height:"220px",left:"-10px",top:"-4px"}, 0);
    },
        function(){
            $(this).children('a img').stop(true,true)
        .animate({width:"700px",height:"212px",left:"0",top:"0"}, 0);
        });
  });
</script>
 
<a href="#">
<div class="zoom">
<img src="img1.jpg" alt="" height="212" width="700"> 
</div></a>
 
<a href="#">Текстовый линк</a>

Как, при наведении на внизу лежащий, Текстовый линк добиться того же увеличение, как при наведении на саму картинку?
Таких дивов и Текстовых линков должно быть несколько пар, и я так понимаю, каждому диву необходимо задать id и, отслеживая через onMouseOver, что-то делать, вот только что...

Совсем не получается. Может кто-то вникнет?

Добавлено через 14 часов 45 минут
Коке как все таки решил, может кому пригодится

Кликните здесь для просмотра всего текста

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
27
<style type="text/css">
div.zoom { width:700px; height:212px; position:relative; float:left; margin:13px; }
div.zoom img { position:relative; cursor:pointer; left:0; top:0; width:700px; height:212px; border: 1px solid black;}
div.zoom:hover { overflow:visible; visibility:hidden; }
div.zoom:hover img { visibility:visible; position:absolute; z-index:150; border: none; }
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('.zoom').hover(function(){
      $(this).children('a img').stop(true,true)
            .animate({width:"720px",height:"220px",left:"-10px",top:"-4px"}, 0);
    },
        function(){
            $(this).children('a img').stop(true,true)
        .animate({width:"700px",height:"212px",left:"0",top:"0"}, 0);
        });
  });
</script>
 
<a href="#">
<div id="1" class="zoom">
<img src="1.jpg" alt="" height="212" width="700"> 
</div></a>
 
<a href="#" onMouseOver="$('#1').children('a img').stop(true,true).animate({width:'720px',height:'220px',left:'-10px',top:'-4px'}, 0);" onMouseOut="$('#1').children('a img').stop(true,true).animate({width:'700px',height:'212px',left:'0',top:'0'}, 0);">Text link</a>

Ну и если кто предложит более красивый вариант, буду благодарен.

Новые блоги и статьи Все статьи Все блоги /
Мульти-тенантные БД с PostgreSQL Row Security Codd 23.04.2025 Современные облачные сервисы и бизнес-приложения всё чаще обслуживают множество клиентов в рамках единой программной инфраструктуры. Эта архитектурная модель, известная как мульти-тенантность, стала. . .	Реализация конвейеров машинного обучения с Python и Scikit-learn AI_Generated 23.04.2025 Мир данных вокруг нас растёт с каждым днём, и умение эффективно обрабатывать информацию стало необходимым навыком. Специалисты по машинному обучению ежедневно сталкиваются с задачами предобработки. . .	Контроллеры Kubernetes Ingress: Сравнительный анализ Mr. Docker 23.04.2025 В Kubernetes управление входящим трафиком представляет собой одну из ключевых задач при построении масштабируемых и отказоустойчивых приложений. Ingress — это API-объект, который служит вратами. . .	Оптимизация кода Python с Cython и Numba py-thonny 23.04.2025 Python прочно обосновался в топе языков программирования благодаря своей простоте и гибкости. Разработчики любят его за читабельность кода и богатую экосистему библиотек. Но у этой медали есть и. . .	Микросервис на Python с FastAPI и Docker ArchitectMsa 23.04.2025 В эпоху облачных вычислений и растущей сложности программных продуктов классическая монолитная архитектура всё чаще уступает место новым подходам. Микросервисная архитектура становится фаворитом. . .
Создаем веб-приложение на Vue.js и Laravel Reangularity 23.04.2025 Выбор правильного технологического стека определяет успех веб-проекта. Laravel и Vue. js формируют отличную комбинацию для создания современных приложений. Laravel — это PHP-фреймворк с элегантным. . .	Максимальная производительность C#: Span<T> и Memory<T> stackOverflow 22.04.2025 Мир высоконагруженных приложений безжалостен к неэффективному коду. Каждая миллисекунда на счету, каждый выделенный байт памяти может стать причиной падения производительности. Разработчики на C#. . .	JWT аутентификация в Java Javaican 21.04.2025 JWT (JSON Web Token) представляет собой открытый стандарт (RFC 7519), который определяет компактный и самодостаточный способ передачи информации между сторонами в виде JSON-объекта. Эта информация. . .	Спринты Agile: Планирование, выполнение, ревью и ретроспектива EggHead 21.04.2025 Спринты — сердцевина Agile-методологии, позволяющая командам создавать работающий продукт итерационно, с постоянной проверкой гипотез и адаптацией к изменениям. В основе концепции спринтов лежит. . .	Очередные открытия мега простых чисел, сделанные добровольцами с помощью домашних компьютеров Programma_Boinc 21.04.2025 Очередные открытия мега простых чисел, сделанные добровольцами с помощью домашних компьютеров. 3 марта 2025 года, в результате обобщенного поиска простых чисел Ферма в PrimeGrid был найден. . .

Опции темы