我希望我的徽标图像向上移动而不会影响它下面的措辞,但是这两个元素都被触发,即使它们位于不同的div中,包裹在父div中。我不明白。我假设它与边距有关,但是当我试图反转为文本元素设置相反的值时,事情很奇怪。
CSS:
.full-circle {
display:block;
margin:auto;
margin-top: 15px;
overflow: hidden;
height: 180px;
width: 180px;
border: 2px solid #FFF;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
background:#FDF5E6;
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-o-transition: margin 0.2s ease-out;
}
.full-circle:hover{margin-top: 2px;}
jQuery的:
$('.full-circle').hover(
function(){
$(this).stop().animate(
{marginTop: '2'}, 20, 'linear'
);//end animate
},//end function
function(){
$(this).stop().animate(
{marginTop: '15'}, 20, 'linear'
);//end animate
}//end function
);//end hover
答案 0 :(得分:1)
您只需将position: relative
添加到.full-circle
,然后为top
属性设置动画,而不是margin-top
。
$('.full-circle').hover(
function(){
$(this).stop().animate(
{top: '-10'}, 20, 'linear'
);//end animate
},//end function
function(){
$(this).stop().animate(
{top: '15'}, 20, 'linear'
);//end animate
}//end function
);//end hover
答案 1 :(得分:0)
文本向上移动,因为两个项目都在流程中,而移动第一个项目将影响第二个项目的位置。
不是调整圆圈上的边距,而是应用position:relative;
,然后将top属性调整为负值,将其向上移动top:-20px;
(无论需要多少)。
调整相对定位元素的顶部,底部,左侧或右侧属性会影响元素在屏幕上的绘制位置,而不会影响它与流中邻居的交互方式。
答案 2 :(得分:0)
简单的CSS
.full-circle{margin-top:15px; margin-bottom:15px}
.full-circle:hover{margin-top:2px; margin-bottom:28px}
.logo{overflow:hidden;}
这将没有JQuery,使用jquery你也可以这样做,只需将更改应用于margintop,也应用于底部,这将管理更改。
现在你的.grey
有过滤器正在创建额外的边距/填充,所以对于那个
我这样做是为了避免溢出.logo{ overflow:hidden}
工作fiddle
这样做。