相同的代碼，但懸停範圍的兩種效果

我有下面的代碼，它似乎可以工作，但是，當過渡作品在archOver和postOver中不同時，空間不同。高度，寬度，位置是相同的，但是當我將鼠標懸停在拱門上時，它可以正常工作，因爲過渡只是在「移動」。但是當我徘徊在帖子後，在帖子「移動」中過渡。我認爲這不會那樣工作，我認爲只有當我在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>

來源

2012-01-16 Błażej

我已經解決了！

<a href> .. </a>限制了懸停區域。

來源

2012-01-17 14:29:21

相同的代碼，但懸停範圍的兩種效果

回答

相關問題