Question

我有下面的代码，它看起来很有效但是，转换工作的空间在archOver和postOver中是不同的。高度，widht，位置是相同的，但是当我在拱门上盘旋时，它工作正常，因为过渡只是“移动”。但是当我在帖子中徘徊时，过渡到“移动”。我认为这不会那样有效，在我看来，只有当我在postOver上进行时，transistion才会“移动”。你怎么看？

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>

Answer 1

我已经解决了！

<a href> .. </a>限制了悬停区域。

相同的代码，但悬停范围有两种效果

1 个答案: