0

我有点问题。我有一个带有定制皮肤的滑块（皇家滑块）。在滑块悬停时，标题从底部升起，但是，只有在标题为一行时才看起来不错。

有没有办法让它从底部的相同起始位置上升，显示每张幻灯片的整个标题，即使每张幻灯片的内容量不同。

/***************
*
*  8. Global caption
*
****************/
.custom-smc .rsGCaption {
    position: absolute;
    float: none;
    bottom: -30px;
    left: 0px;
    text-align: left;

    background: #BD3333;

    color: #fff ;
    padding: 13px 10px 10px 10px;
    width: 100%;

    font-size: 12px;

opacity:0.5;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;



}

#new-royalslider-7:hover .rsGCaption {


opacity:.9;
transform: translate(0,-30px);
    -webkit-transform: translate(0,-30px);
    -o-transform: translate(0,-30px);
    -moz-transform: translate(0,-30px);


}
4

1 回答 1

0

您的系统现在要设置底部：

.custom-smc .rsGCaption {
    bottom: -30px;
}

悬停时向上移动

#new-royalslider-7:hover .rsGCaption {
    transform: translate(0,-30px);
}

这很难适应不同大小的 rsGCaption。

解决它的一种方法是使用以百分比而不是像素设置变换的可能性。并将底部留在 0px，这是唯一与内容无关的已知位置：

.rsGCaption {
    position: absolute;
    float: none;
    bottom: 0px;
    left: 0px;
    text-align: left;
    background: #BD3333;
    color: #fff ;
    padding: 13px 10px 10px 10px;
    width: 100%;
    font-size: 12px;
    opacity:0.5;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transform: translate(0,100%);
    -o-transform: translate(0,100%);
    -moz-transform: translate(0,100%);
    transform: translate(0,100%);
}

#new-royalslider-7:hover .rsGCaption {
    opacity:.9;
    transform: translate(0,0%);
    -webkit-transform: translate(0,0%);
    -o-transform: translate(0,0%);
    -moz-transform: translate(0,0%);
}

请注意，现在我们需要 2 组转换，初始状态是“转换”，悬停状态需要重置。

于 2013-10-24T17:35:19.877 回答