[英]Change multiple css elements when hovering
I am trying to accomplish an effect with CSS3, I would like to slide a figcaption from the bottom of a figure and slide the figure up when hovering. 我正在尝试使用CSS3实现效果,我想从图形的底部滑动figcaption,并在悬停时将图形向上滑动。
more or less like shows this example: http://tympanus.net/Tutorials/CaptionHoverEffects/index3.html 或多或少像显示此示例: http : //tympanus.net/Tutorials/CaptionHoverEffects/index3.html
Unfortunately, when hovering just the figure slides, while figcaption doesn't show up (it does not change its opacity, nor it translates) 不幸的是,当鼠标悬停在图形上时,figcaption不会显示(它不会改变其不透明度,也不会翻译)
Here is the code I am using: 这是我正在使用的代码:
#figure:hover img{
options}
and it works, but 它有效,但是
#figure:hover figcaption{
options}
is not working, why it applies the hover just to the img element and not to figure? 无法正常工作,为什么将悬停仅应用于img元素而不是图? http://jsfiddle.net/GKfQ2/
http://jsfiddle.net/GKfQ2/
Thanks to the answerers in advance :) 在此先感谢答题者:)
You hae not applied a transform value to the hover state of the figcaption 您尚未将变换值应用于figcaption的悬停状态
Revised CSS 修订的CSS
li {
list-style: none;
display: inline-block;
overflow: hidden;
}
#featured figure{
margin:0;
position:relative;
}
#featured figure img {
max-width:100%;
display:block;
position:relative;
-webkit-transition: -webkit-transform 0.7s;
-moz-transition: -moz-transform 0.7s;
-o-transition: -o-transform 0.7s;
transition:transform 0.7s;}
figure:hover img{
transform: translateY(-50px);
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
}
figure figcaption{
position:absolute;
bottom:0;
padding:14px;
background: #ddd;
width:100%;
height:50px;
opacity:1;
/* the relevant bits */
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.7s;
-moz-transition: -moz-transform 0.7s;
transition: transform 0.7s;
}
figure:hover figcaption{
opacity:1;
/* the relevant bits */
-webkit-transform: translateY(0%);
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
}
h4{
font-size:18x;}
span{font-size:13px;
color:black;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.