divに置き換える方法（CSSのみ）

Question

2つのボックスがあり、1つは隠され、もう1つは見えます。デフォルトのボックスがホバーすると消えて、ディスプレイが表示されていないボックスが表示されるようにしたいと思っています。

ここにはcodeがあります。これは、一度ボックスが1つホバーされているため、まだ見えているので、私はそれが欲しいと思っています。display: noneです。

.box1, .box2{ 
 
    width:100px; 
 
    height 100px; 
 
    border:1px solid black; 
 
    text-align:center; 
 
} 
 

 
.box1{ 
 
    display: block; 
 
} 
 

 
.box2{ 
 
    display: none; 
 
} 
 

 
.box1:hover ~ .box2{ 
 
    display:block; 
 
}

<div class="box1"> 
 
    <p>data 1</p> 
 
</div> 
 

 
<div class="box2"> 
 
    <p>data 2</p> 
 
</div>

ボックスが切り替えたら、それがアニメ化された場合、それは良いかもしれません。

同様の質問がありましたが、すべてがJavaScriptを求められました。私はCSSだけを好む。

前もって感謝します。

Answer 1

次のCSSを持つ2つのdivにラッパーを追加することができます。

.wrapper { 
    width: auto; 
    display: inline-block; 
    background-color: red; //for visuals 
} 

そして、あなたは、このいずれかを試してみてください.box1

.box1, 
 
.box2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
} 
 

 
.box1 { 
 
    display: block; 
 
} 
 

 
.box2 { 
 
    display: none; 
 
} 
 

 
.wrapper { 
 
    width: auto; 
 
    display: inline-block; 
 
    background-color: red; 
 
} 
 

 
.wrapper:hover .box1 { 
 
    display: none; 
 
} 
 

 
.wrapper:hover .box2 { 
 
    display: block; 
 
}

<div class="wrapper"> 
 
    <div class="box1"> 
 
    <p>data 1</p> 
 
    </div> 
 

 
    <div class="box2"> 
 
    <p>data 2</p> 
 
    </div> 
 
</div>

Answer 2

を非表示にするのを忘れているようです。

.box1, .box2{ 
 
    width:100px; 
 
    height 100px; 
 
    border:1px solid black; 
 
    text-align:center; 
 
    float: left; 
 
} 
 

 
.box1{ 
 
    display: block; 
 
    background: red; 
 
} 
 

 
.box2{ 
 
    display: none; 
 
    margin-left: -102px; 
 
    background: green; 
 
} 
 
.box1:hover{ 
 
    opacity:0; 
 
} 
 
.box1:hover ~ .box2{ 
 
    display:block; 
 
}

<div class="box1"> 
 
    <p>data 1</p> 
 
</div> 
 

 
<div class="box2"> 
 
    <p>data 2</p> 
 
</div>

Answer 3

これを試してみてください。私はbox1とbox2といくつかのCSSをラップするために余分なdivを1つ追加しました。

.box1, .box2{ 
 
    width:100px; 
 
    height: 100px; 
 
    border:1px solid black; 
 
    text-align:center; 
 
    transition:0.5s; 
 
} 
 
.box2 { 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.box-wrap:hover .box2{ 
 
    opacity:1; 
 
    transform:translateY(0px); 
 
} 
 
.box-wrap:hover .box1{ 
 
    opacity:0; 
 
    height:0; 
 
} 
 
.box-wrap{ 
 
    position:relative; 
 
    display:inline-block; 
 
    vertical-align: top; 
 
}

<div class="box-wrap"> 
 
    <div class="box1"> 
 
    <p>data 1</p> 
 
    </div> 
 

 
    <div class="box2"> 
 
    <p>data 2</p> 
 
    </div> 
 
</div>

Answer 4

これはあなたのために正常に動作します。

私は、あなたの必要とするためにいくつかの移行を使用しています。

あなたの必要性は.box1と.box2の周りにdivをラップすることによってのみ達成できます。

.box1, 
 
.box2 { 
 
    width: 100px; 
 
    height 100px; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    max-height: 200px; 
 
    opacity: 1; 
 
    transition: all ease-in-out 0.4s; 
 
} 
 

 
.box1 { 
 
    display: block; 
 
} 
 

 
.box2 { 
 
    max-height: 0px; 
 
    opacity: 0; 
 
} 
 
.main_box{ 
 
display:inline-block; 
 
} 
 

 
.main_box:hover .box1{ 
 
    max-height: 0px; 
 
    opacity: 0; 
 
} 
 

 
.main_box:hover .box2{ 
 
    max-height: 200px; 
 
    opacity: 1; 
 
}

<div class="main_box"> 
 
    <div class="box1"> 
 
    <p>data 1</p> 
 
    </div> 
 

 
    <div class="box2"> 
 
    <p>data 2</p> 
 
    </div> 
 
</div>

希望これはあなたのための参考になりました。

Answer 5

回答：Mr。@Swellar答えを参照すると、トランジションエフェクトを追加することに気付きました。

.box1, 
 
.box2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    position: absolute; 
 
    transition: 600ms ease;; 
 
} 
 

 
.box1 { 
 
    opacity: 1; 
 
    visibility: visible; 
 
    background-color: red; 
 
} 
 

 
.box2 { 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    background-color: green; 
 
} 
 

 
.wrapper { 
 
    width: auto; 
 
    display: inline-block; 
 
} 
 

 
.wrapper:hover .box1 { 
 
    opacity: 0; 
 
    visibility: hidden; 
 
} 
 

 
.wrapper:hover .box2 { 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<div class="wrapper"> 
 
    <div class="box1"> 
 
    <p>data 1</p> 
 
    </div> 
 

 
    <div class="box2"> 
 
    <p>data 2</p> 
 
    </div> 
 
</div>

：

は、したがって、あなたは代わりにdisplay: noneとdisplay: blockの詳細については、次のコードを参照してくださいopacity: 0;visibility: hidden間とopacity: 1;visibility: visibleあなたが切り替わります onhover両方boxsesためposition: absolute、 を設定する必要があります