Question

就像这里的问题（How would I reverse a css transition property width?）一样，我想扭转过渡的方式。

不幸的是，它不适合我！可能是我的代码比那复杂得多。任何人都可以帮我一把吗？

CSS：

    .Imgpad
{
padding-top:2px;
padding-left:2px;
padding-bottom:3px;
padding-right:2px;
    position:absolute;
    z-index:1;
}

.hidetext {
float:right;
display:none;
margin:0;
padding:0;
color:#CC0000;
font-size:30px;
font-family:"Juice ITC";
}

.Rightbox
{
width:100px;
height:100px;
background:black;
transition: left 2s, width 2s;
position:absolute;
}

.Rightbox:hover{
width:250px;
}

.Rightbox:hover > .hidetext {
display:block;
}

HTML：

</div>
<div class="content-wrapper">
<div id="Divpos5">
<div class="Rightbox">
    <img class="Imgpad" src="http://b.vimeocdn.com/ps/588/58832_300.jpg" height="96" width="96" alt="Faye">
    <p class="hidetext">Raven Faye<br><font color="#9900CC"></font>~The Sorceress
    </div>
</div>

由于 -Asteria

Answer 1

不确定这是不是你要找的东西，但这就是我做的......

http://jsfiddle.net/cPUuL/5/

css：

.Imgpad {
    padding-top:2px;
    padding-left:2px;
    padding-bottom:3px;
    padding-right:2px;
}

.hidetext {
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 2px;
    margin: 0px;
    color:#CC0000;
    font-size:30px;
    font-family:"Juice ITC";
    background: #000; 
    height: 96px;
    width: 96px;
    overflow: hidden;
    z-index: -1;
    transition: left 0.5s, width 0.5s;

}

.Rightbox {
    width: 100px;
    height: 100px;
    background:black;
    position: relative;
}

.Rightbox:hover > .hidetext {
    left: 100px;
    width: 250px;
    transition: left 1s, width 1s;
}

正如您可以看到.Rightbox:hover > .hidetext上的转换速度;比没有:hover的那个慢，这意味着反向转换的变化将比.Rightbox:hover > .hidetext更快。换句话说，反向转换是指您将鼠标移出Rightbox。

并修复了HTML。你有很多未公开的标签和font标签在那里显然无用。

<div class="Rightbox">
    <img class="Imgpad" src="http://b.vimeocdn.com/ps/588/58832_300.jpg" height="96" width="96" alt="Faye" />
    <p class="hidetext">Raven Faye<br />~The Sorceress</p>
</div>

这是一个更新的小提琴，用于更改right属性，因为如果要将其向左移动，则必须更改右上角。

http://jsfiddle.net/cPUuL/6/

改变的CSS是：

.Rightbox:hover > .hidetext {
    right: 100px;
    width: 250px;
    transition: left 1s, width 1s;
}

.hidetext {

    ... 
    right: 0px; /* instead of left: 0px; */
    ...
}

我还为Rightbox添加了一个保证金，以便我们看到更改。

使用这个css你也可以做一个很酷的过渡：

.Rightbox,
.Imgpad,
.hidetext {
    transition: left 1s, width 1s;
}

.Rightbox:hover,
.Rightbox:hover .Imgpad,
.Rightbox:hover .hidetext {
    transition: left 0.5s, width 0.5s;
}

.Imgpad {
    z-index: 2;
    position: absolute;
    top: 0px;
    right: 0px;
    padding-top:2px;
    padding-left:2px;
    padding-bottom:3px;
    padding-right:2px;
}

.hidetext {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 102px;
    bottom: 2px;
    margin: 0px;
    color: #CC0000;
    font-size:30px;
    font-family:"Juice ITC";
    overflow: hidden;
    z-index: 1;
    white-space: nowrap;
}

.Rightbox {
    width: 100px;
    height: 100px;
    background:black;
    position: relative;
}

.Rightbox:hover {
    width: 404px;
}

HTML反向转换方向

1 个答案: