동일 코드이지만 호버 범위가있는 두 개의 효과

아래 코드가 있습니다. 작동하는 것처럼 보이지만, 전환 작업이 archOver 및 postOver에서 다를 수 있습니다. 높이, 높이, 위치는 동일하지만 아치에서 마우스를 가져 가면 전환이 '이동'하기 때문에 잘 작동합니다. 그러나 포스트에서의 전환은 내가 포스트에 머무를 때 "움직인다". 그렇게 생각하면 Transformion은 내가 postOver에있을 때만 "움직여야"합니다. 어떻게 생각해?동일 코드이지만 호버 범위가있는 두 개의 효과

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

동일 코드이지만 호버 범위가있는 두 개의 효과

답변

관련 문제