如何同时转换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？

回答

相关问题