当我悬停已经拥有自己过渡的外部div框(父级)时,我想创建一个会触发我的按钮转换的效果。这可以用css完成还是需要一些javascript?
我的例子:
.box {
height: 300px;
width: 300px;
background: #eeeeee;
float: left;
margin: 50px;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
.box:hover {
height: 350px;
}
#box_pic1 {
background: url(http://nicholsd.com/_Media/image-15_med.png);
background-repeat: no-repeat;
background-position: relative;
height: 196px;
width: 262px;
margin: 0 auto;
margin-top: 20px;
}
.btn_ani {
font-size: 13px;
text-align: center;
color: #ffffff;
opacity: 0.5;
width: 150px;
background: #99745c;
border:1px solid #99745c;
line-height: 35px;
transition: opacity 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
position: absolute;
margin-left: 56px;
}
.btn_ani:hover {
background: #ffffff;
color: #99745c;
opacity: 1;
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s;
transition: all ease 0.5s;
border:1px solid #99745c;
margin-top: 80px;
}
<div class="box">
<a href="www.google.com">
<div id="box_pic1">
<div class="btn_ani">View</div>
</div>
</a>
</div>
答案 0 :(得分:7)
可以使用CSS完成。您只需将:hover
状态移至父.box
,将目标移至.box:hover .btn_ani
。
在这种情况下,元素可以有自己的transition
值。
.box {
height: 300px;
width: 300px;
background: #eeeeee;
float: left;
margin: 50px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.box:hover {
height: 350px;
}
#box_pic1 {
background: url(http://nicholsd.com/_Media/image-15_med.png);
background-repeat: no-repeat;
background-position: relative;
height: 196px;
width: 262px;
margin: 0 auto;
margin-top: 20px;
}
.btn_ani {
font-size: 13px;
text-align: center;
color: #ffffff;
opacity: 0.5;
width: 150px;
background: #99745c;
border:1px solid #99745c;
line-height: 35px;
transition: opacity 0.5s;
/* different transition from the parent */
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s;
transition: all ease 0.7s;
position: absolute;
margin-left: 56px;
}
.box:hover .btn_ani {
background: #ffffff;
color: #99745c;
opacity: 1;
border:1px solid #99745c;
margin-top: 80px;
}
&#13;
<div class="box">
<a href="www.google.com">
<div id="box_pic1">
<div class="btn_ani">View</div>
</div>
</a>
</div>
&#13;
答案 1 :(得分:1)
如果你想想尝试一些jQuery,你可以使用这样的解决方案:
$('.box').hover(function(){
$('.btn_ani').toggleClass('margin');
});
使用css:
.margin{
margin-top:80px;
}