我有这个:
$('#btn-adm2').on('mouseover', function (event) {
$('#btn-adm2 .menu-text').css('height', '100%');
});
$('#btn-adm2').on('mouseout', function (event) {
$('#btn-adm2 .menu-text').css('height', '');
});
.menu-btn {
width: 100px;
height: 100px;
position: relative;
margin: auto;
overflow: hidden;
border-radius: 20px;
border: 3px solid White;
background-color: rgb(220, 220, 220);
box-sizing: border-box;
box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.2);
transition: all 100ms linear;
}
.menu-btn:hover {
background-color: white;
border: 3px solid #0089c8;
/* Azul Ascendi */
transition: border 0.75s ease-in-out;
}
.menu-btn:hover .menu-text {
background-color: rgba(255, 255, 255, .8);
color: black;
transition: all 250ms linear;
}
.menu-item-div-top {
width: 25%;
height: 50%;
box-sizing: border-box;
display: inline-block;
}
.menu-text {
color: white;
font-size: 1.8vw;
line-height: 4vw;
position: absolute;
width: 100%;
text-align: center;
transition: all 100ms linear;
bottom: 0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: rgba(0, 0, 0, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-item-div-top"> <a href="#" onclick="underConstruction()">
<div id="btn-adm2" class="menu-btn" style="background-image: url('http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png'); background-size: cover;">
<span class="menu-text">Press</span>
</div>
</a>
</div>
悬停时,文本div的高度变为100%。我想让它与一些动画一起成长,而不是仅仅变成一个完整的高度div。我正在寻找div来扩展它的高度,直到按钮的顶部,但我不知道如何。有什么帮助吗?
答案 0 :(得分:2)
您正在尝试为height 100%
添加转换。对于某些浏览器来说,这有点棘手。相反,请尝试使用max-height
上的转换。 max-height
上的转换通常是使用转换的更好方法。
您必须修改以下代码:
添加height
并将值设置为max-height
到菜单文本属性。我在这个例子中将它设置为25px:
.menu-text {
color: white;
font-size: 1.8vw;
line-height: 4vw;
position: absolute;
width: 100%;
text-align: center;
transition: all 100ms linear;
bottom: 0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: rgba(0, 0, 0, 0.5);
height:100%;
max-height:25px;
}
并更改mouseover和mouseout事件的max-height
值,如下所示:
$('#btn-adm2').on('mouseover', function (event) {
$('#btn-adm2 .menu-text').css('max-height', '100%');
});
$('#btn-adm2').on('mouseout', function (event) {
$('#btn-adm2 .menu-text').css('max-height', '25px');
});
在此处查看 - &gt; http://jsfiddle.net/09ov6gn4/
希望这有帮助!!!
答案 1 :(得分:1)
您也可以使用jQuery动画:
$('#btn-adm2').on('mouseover', function (event) {
$("#btn-adm2 .menu-text").animate({height:"100%"}, 10);
});
$('#btn-adm2').on('mouseout', function (event) {
$("#btn-adm2 .menu-text").animate({height:"25px"}, 10);
});
答案 2 :(得分:0)
为高度设置动画
$('#btn-adm2').on('mouseover', function (event) {
$('#btn-adm2 .menu-text').animate({height:'100%'}, 10);
});
$('#btn-adm2').on('mouseout', function (event) {
$('#btn-adm2 .menu-text').animate({height:'25px'}, 10);
});
.menu-btn {
width: 100px;
height: 100px;
position: relative;
margin: auto;
overflow: hidden;
border-radius: 20px;
border: 3px solid White;
background-color: rgb(220, 220, 220);
box-sizing: border-box;
box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.2);
transition: all 100ms linear;
}
.menu-btn:hover {
background-color: white;
border: 3px solid #0089c8;
/* Azul Ascendi */
transition: border 0.75s ease-in-out;
}
.menu-btn:hover .menu-text {
background-color: rgba(255, 255, 255, .8);
color: black;
transition: all 250ms linear;
}
.menu-item-div-top {
width: 25%;
height: 50%;
box-sizing: border-box;
display: inline-block;
}
.menu-text {
color: white;
font-size: 1.8vw;
line-height: 4vw;
position: absolute;
width: 100%;
text-align: center;
transition: all 100ms linear;
bottom: 0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: rgba(0, 0, 0, 0.5);
}
#btn-adm2 .menu-text{
transition-duration: 2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-item-div-top"> <a href="#" onclick="underConstruction()">
<div id="btn-adm2" class="menu-btn" style="background-image: url('http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png'); background-size: cover;">
<span class="menu-text">Press</span>
</div>
</a>
</div>
答案 3 :(得分:0)
由于在鼠标悬停之前没有为.menu-text元素指定显式高度,因此它默认为height:auto,这不是css过渡友好的。
我建议指定一个显式高度(例如:http://jsfiddle.net/o6hz9tra/2/)
.menu-text { height: 20px; }
或者如果你想保持身高:自动,你可以采取不同的方法并设置最大高度风格的动画(请参阅此处的某人示例:http://jsfiddle.net/leaverou/zwvNY/)
.menu-text {
max-height:1.2em;
background:slategray;
color:white;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
.menu-text:hover {
max-height:999px;
}
答案 4 :(得分:0)
要仅使用CSS,您应该转换min-height
属性:
.menu-btn:hover .menu-text {
background-color: rgba(255, 255, 255, .8);
color: black;
min-height: 100%;
transition: all 250ms linear;
}
作为旁注: 您应该避免使用transition: all
而是指定哪些属性/ ies
过渡。