Как перейти 2 divs одновременно?

Question

Я пытаюсь сделать анимированное меню, когда я наводил на него курсор, фон (или изображение) уменьшает и в то же время расширяется текст.

Вот мой таблицы стилей:

.menus { 
    float: left; 
    background-image: url(images/menus_bg.png); 
    width: 208px; 
    height: 283px; 
    } 
.menusimg { 
    width: 208px; 
    height: 283px; 
    position: absolute; 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-image: url(images/menu1.png); 
    } 
.menusimg:hover { 
    background-size: 80% 80%; 
    } 
.menusimg, .menusimg:hover { 
    -webkit-transition: background-size 0.2s ease-in ; 
    } 
.menustxtbox { 
    font-family: MP; 
    padding-top: 240px; 
    width: 208px; 
    height: 283px; 
    color: #4c4c4c; 
    font-size: large; 
    text-shadow: gray 0.1em 0.1em 0.2em; 
    } 
.menustxtbox:hover { 
    padding-top: 235px; 
    font-size: x-large; 
    color: #4fa3f9; 
    } 
.menustxtbox, .menutxtbox:hover { 
    -webkit-transition:font-size 0.1s linear; 
    -moz-transition:font-size 0.1s linear; 
    } 

и HTML:

<div class="menus"> 
     <div class="menusimg"> 
     </div> 
     <div class="menustxtbox"> 
      Text 
     </div> 
    </div> 

Любые идеи? Простой сценарий Java или что-нибудь, что решит эту проблему? :) Заранее спасибо ^^

Answer 1

Ну, без какой-либо коды, чтобы увидеть, что вы сделали что-нибудь или пытались что-нибудь с JavaScript, я хотел бы предложить следующее:

Изменения CSS, чтобы сделать реальные размеры шрифта размер первого:

.menustxtbox { 
    font-size:40px; 
} 

затем сделать некоторые JQuery

$('.menus').hover(function(){ 
    $('.menusimg').animate({width: "100px"}); 
    $('.menustxtbox').animate({fontSize: "90px"}); 
}, function(){ 
    $('.menusimg').animate({width: "208px"}); 
    $('.menustxtbox').animate({fontSize: "40px"}); 
}); 

затем удалите ваши :hover стили CSS

И если вы хотите использовать зависать, я предлагаю смотреть в hoverintent

UPDATE для комментария ниже

Чтобы сделать это для каждого отдельного пункта меню, вам придется назвать вещи определенным путь. Вот пример.

HTML

<div class="menu"> 
    <div class="menuItem" id="menu1"> 
     <div class="menusimg"></div> 
     <div class="menustxtbox"></div> 
    </div> 
    <div class="menuItem" id="menu2"> 
     <div class="menusimg"></div> 
     <div class="menustxtbox"></div> 
    </div> 
    <div class="menuItem" id="menu3"> 
     <div class="menusimg"></div> 
     <div class="menustxtbox"></div> 
    </div> 
</div> 

Затем с JQuery, вы должны будете использовать $(this) и .children()

$('.menuItem').hover(function(){ 
    $(this).children('.menusimg').animate({width: "100px"}); 
    $(this).children('.menustxtbox').animate({fontSize: "90px"}); 
}, function(){ 
    $(this).children('.menusimg').animate({width: "208px"}); 
    $(this).children('.menustxtbox').animate({fontSize: "40px"}); 
}); 

При использовании $(this), вы будете делать все, что вы хотите конкретной вещи вы пытаетесь использовать. Затем вы просто поднимаетесь или опускаетесь оттуда, используя родителей или детей, чтобы что-то сделать с ними.

Answer 2

I второй, что ntgCleaner сказал.

Кроме того, вы можете использовать:

$('.menus').hover(function(){ 
    $('.menusimg').addClass('active'); 
    $('.menustxtbox').addClass('active'); 
}, function(){ 
    $('.menusimg').removeClass('active'); 
    $('.menustxtbox').removeClass('active'); 
}); 

И ваш CSS будет иметь:

.menusimg.active, .menusimg.active{ 
-webkit-transition: background-size 0.2s ease-in ; 
} 

т.д.