画面

Question

にアンカーステーを作り、私は画面上に表示さ4つのアンカー持っている：ホバーアンカーが拡大し、彼らが画面の外に最後のdivを押した後

を：

#box1{ 
 
    height: 100%; 
 
    width: 25%; 
 
    background-color: black; 
 
    transition: all 500ms ease-in-out; 
 
    
 
} 
 

 
#box1:hover{ 
 
    height: 100%; 
 
    width: 30%; 
 
    left:-5%; 
 
    
 
} 
 

 
#box2{ 
 
    height: 100%; 
 
    width: 25%; 
 
    background-color: green; 
 
transition: all 500ms ease-in-out; 
 
    
 
} 
 

 
#box2:hover{ 
 
    height: 100%; 
 
    width: 30%; 
 
    left:-5%; 
 
} 
 

 

 
#box3{ 
 
    height: 100%; 
 
    width: 25%; 
 
    background-color: blue; 
 
    
 
    
 
    
 
    
 
    
 
    transition: 500ms ; 
 
    
 
} 
 

 
#box3:hover{ 
 
    width: 30%; 
 
    height: 100%; 
 
    left:-5%; 
 
    
 
    
 
} 
 
#box4{ 
 
    height: 100%; 
 
    width: 25%; 
 
    background-color: darkviolet; 
 

 
    
 
} 
 

 
#box4:hover{ 
 
    height: 100%; 
 
    width: 30%; 
 
    left:-5%; 
 
    float: right; 
 
} 
 

 
.box { 
 
    float: left; 
 
    
 
} 
 

 
.boxdiv{ 
 
    height: 100%; 
 
    width: 100%; 
 
    position:fixed; 
 
}

 <div class="boxdiv"> 
 
    <a id="box1" class="box" > 
 
    <div> 
 
     
 
     </div> 
 
    </a> 
 
    <a id="box2" class="box"> 
 
    <div> 
 
     
 
     </div> 
 
    </a> 
 
    <a id="box3" class="box"> 
 
    
 
    </a> 
 
    <a id="box4" class="box"> 
 
    <div> 
 
     
 
     </div> 
 
    </a> 
 
</div>

アンカーを拡大して最後のアンカーを画面に残すにはどうすればよいですか？私はアンカーを拡大したいが、紫色のアンカーもまた見ることができる。

Answer 1

フレックスボックスでも可能です。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.red { 
 
    background: #f00; 
 
} 
 
.green { 
 
    background: #0f0; 
 
} 
 
.blue { 
 
    background: #00f; 
 
} 
 
.orange { 
 
    background: orange; 
 
} 
 
div { 
 
    height: 150px; 
 
    display: flex; 
 
} 
 
.parent a { 
 
    flex: 1 1 25%; 
 
    transition: flex-basis .5s ease; 
 
} 
 
.parent a:hover { 
 
    flex: 1 0 30%; 
 
}

<div class="parent"> 
 
    <a href="#1" class="box red"></a> 
 
    <a href="#2" class="box blue"></a> 
 
    <a href="#3" class="box green"></a> 
 
    <a href="#4" class="box orange"></a> 
 
</div>