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

我是第二个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 ;
}

等

Answer 2

好吧，如果没有任何代码可以看到你已经做过任何事情或尝试使用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

更新以获取

以下的评论

要为每个单独的菜单项执行此操作，您必须以某种方式命名。这是一个例子。

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)时，您将对您尝试使用的特定内容执行任何操作。然后你就可以使用父母或孩子从那里上下来，或者为这些中的任何一个做些什么。

如何同时转换2个div？

2 个答案: