Расширение ширины и высоты элемента <div>при наведении курсора мыши с использованием jquery вместо css? - PullRequest
Новая
       4

Расширение ширины и высоты элемента <div>при наведении курсора мыши с использованием jquery вместо css?

0 голосов
/ 31 июля 2011

Привет всем, вы, удивительно полезные люди!

Я практиковал свои навыки CSS, и я думал, что доведу свой CSS до предела и оживлю некоторые <div> с.Что ж, CSS подвел меня, и мне интересно, есть ли простой способ добиться эффекта, который я опишу ниже, с помощью javascript. 

<div id="container">
   //on hover div with background img expands in every direction from center acting as border
   <div id="expanding-background">  
      <div id="img-div">   //border's solid-color stroke increases, but size remains same
          <img>
      </div>
   </div>
   //label sits at bottom and drops down as expanding-background expands down.
   <p id="label" style="text-align:centered;">Label</p> 
</div>

С помощью CSS я искал решение, но оно толькоработал, когда я парил внутреннюю img, поэтому при наведении мыши на границу работал только div с расширяющимся фоном.Подобные проблемы произошли с анимацией лейбла.Есть ли простой способ инициировать анимацию нескольких div-ов при наведении курсора на один div?

Заранее спасибо, полезные люди!

1 Ответ

1 голос
/ 31 июля 2011 
$('#yourdiv').bind('hover', function() {
    // Animations to do when hovering. Example:
    #(this).find('#innerDiv').animate('height', '+=200');
}, function() {
    // Animations to do when leaving with the mouse. Example:
    #(this).find('#innerDiv').animate('height', '-=200');
});
...