如何同時轉換2個div？

我試圖製作一個動畫菜單，當我將鼠標懸停在上面時，背景（或圖像）縮小，同時文本展開。如何同時轉換2個div？

那是我的樣式表：

.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腳本或任何可以解決這個問題的東西？ :) 預先感謝您^^

來源

2013-05-09 BrunoWB

好，沒有任何代碼，一看就知道你做了什麼或試圖使用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)，你會做任何你想你想具體的東西使用。然後，您只需從父母或孩子那裏上去或下去，對其中的任何一個做些什麼。

來源

2013-05-09 01:41:40 ntgCleaner

= d 由於它的工作原理:) 我只是需要一些ajust詳情... 感謝@ _ @ – BrunoWB 2013-05-09 16:48:30

不客氣！如果您不介意點擊upvote按鈕並接受答案，我將非常感激！ – ntgCleaner 2013-05-09 17:01:33

1 - 如何僅將這段代碼的onde用於多個單獨的菜單？或者我必須複製到每一個？ 2 - 如何將圖像保存在中心？ – BrunoWB 2013-05-09 21:10:18

我第二什麼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 ; 
}

等

來源

2013-05-09 02:45:26 Miro

如何同時轉換2個div？

回答

相關問題