1

我正在尝试制作一个动画菜单，当我将鼠标悬停在它上面时，背景（或图像）会缩小，同时文本会展开。

那是我的样式表：

.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脚本或任何可以解决这个问题的东西？:) 提前谢谢你^^

4

2 回答 2

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 ;
}

等等

于 2013-05-09T02:45:26.143 回答
0

好吧，没有任何代码可以看到您已经使用 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"});
});

然后删除你的:hovercss样式

如果您想使用悬停，我建议您查看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)，您将对您尝试使用的特定事物做任何您想做的事情。然后，您只需使用父母或孩子从那里向上或向下对其中任何一个做某事。

于 2013-05-09T01:41:40.810 回答