0
私は以下のコードを持っていますが、動作するようですが、移行作業がarchOverとpostOverで異なる場合があります。高さ、高さ、位置は同じですが、アーチにカーソルを合わせると、トランジションが「移動」するだけなので、うまくいきます。しかし、ポストでの移行は私がポストでホバーするときに "動く"。そういうわけではないと思います。私の意見では、トランジションはpostOverに乗るときだけ "動く"べきです。どう思いますか？同じコードだがホバーの範囲を持つ2つのエフェクト
CSS：
body{
font-family:"Segoe UI";
font-size:16px;
color:white;
background-color:white;
padding:0px;
margin:0px;
}
div#sidebar {
position:fixed; left:0px;
margin-left:1%;
padding-left:3px;
padding-right:3px;
width:224px;
height:100%;
}
#logo {
margin-top:5%;
width:222px;
height:222px;
background-image:url(img/logo_thu.png);
background-repeat:no-repeat;
background-position:center;
box-shadow:0px 0px 3px #000000;
}
#archOver{
margin-top:5%;
width:222px;
height:222px;
background-image:url(img/arch.jpg);
box-shadow:0px 0px 3px #000000;
-webkit-transition:width 1s;
}
*:hover > #archOver{
width: 0;
}
#archText{
position:relative; top:-222px;
font-size:12px;
width:222px;
height:222px;
box-shadow:0px 0px 3px #000000;
color:black;
text-align:center;
z-index:-1;
}
div#footer{
margin:0 1% 0 1%;
position:fixed; bottom:1%;
width:98%;
font-size:10px;
text-align:center;
background-color:#000000;
box-shadow:0px 0px 3px #000000;
}
a:link, a:hover, a:visited {
text-decoration:none;
color:inherit;
}
--------------SAME AS SIDEBAR---------------
div#post {
position:fixed; right:0px;
margin-left:1%;
padding-left:3px;
padding-right:3px;
width:224px;
height:100%;
}
#logo2 {
margin-top:5%;
width:222px;
height:222px;
background-image:url(img/logo_thu.png);
background-repeat:no-repeat;
background-position:center;
box-shadow:0px 0px 3px #000000;
}
#postOver{
margin-top:5%;
width:222px;
height:222px;
background-image:url(img/arch.jpg);
box-shadow:0px 0px 3px #000000;
-webkit-transition:width 1s;
}
*:hover > #postOver{
width: 0;
}
#postText{
position:relative; top:-222px;
font-size:12px;
width:222px;
height:222px;
box-shadow:0px 0px 3px #000000;
color:black;
text-align:center;
z-index:-1;
}
HTML：
<body>
<div id="sidebar">
<div id="logo"></div>
<a href="index.html">
<div id="archOver"></div></a>
<div id="archText"></div>
</div>
<div id="post">
<div id="logo2"></div>
<div id="postOver"></div>
<div id="postText">text</div>
</div>
<div id="footer">
</div>
</body>