cssを使用している画像上のメニューにアクセス

Question

<div class = "woman"> 
      <div class = "container"> 
        <img src = "https://i.imgur.com/BCGiTk3.jpg"> 
        <div class = "item-desc"> 
         <span>$49</span> 
         <span>Fluted hem dress</span> 
         <span>Summer Dress</span> 
        </div> 
        <div class = "message"> 
         <span>Sizes</span> 
         <span>XS, S, M, L, XL, XXL</span> 
        </div> 

        <div class = "checkout"> 
         <button class = "add btn">Add to cart</button> 
         <button class = "view btn">View Cart</button> 
        </div> 
      </div> 
     </div> 

私には2つの問題があります。

1. するとページが最初に読み込まれると、私は隠されているdivが最初に示し、その後に隠されています。 （.message div）

2. 画像の上にカーソルを置くと、表示したいメニューが表示されますが、メニューにカーソルを合わせると消えます。どうすればそれを得ることができますか？

ご注意：

私はすでに私はJavascriptに何を望むか達成が、私はそれが唯一のCSSで可能ですかどうかを確認するために実験しています。

JSFiddle：https://jsfiddle.net/L3pt599b/

Answer 1

は、次のセレクターを追加することができます。おそらくoverflow:hiddenに.woman > .containerを追加すると役立つかもしれません。

ここに抜粋です：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: "Open Sans"; 
 
} 
 

 
.right { 
 
    float: right; 
 
} 
 

 
.woman { 
 
    position: relative; 
 
} 
 

 
.woman>.container { 
 
    margin: 30px 30px; 
 
    width: 333px; 
 
    height: 466px; 
 
    background: yellow; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.woman>.container>img { 
 
    width: 333px; 
 
} 
 

 
.woman>.container>.item-desc { 
 
    position: absolute; 
 
    /*bottom: 100px;*/ 
 
    bottom: 0px; 
 
    height: 80px; 
 
    width: 100%; 
 
    background: #FFF; 
 
    transition: bottom 200ms ease-out; 
 
} 
 

 
.woman>.container>.message { 
 
    position: absolute; 
 
    bottom: -100px; 
 
    height: 100px; 
 
    width: 100%; 
 
    background: #FFF; 
 
    transition: all 200ms ease-out; 
 
    visibility: hidden; 
 
} 
 

 
.woman>.container>div:nth-child(2) span:first-child { 
 
    color: #5ff7d2; 
 
    font-size: 22px; 
 
    float: right; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    position: relative; 
 
    right: 20px; 
 
    top: 20px; 
 
} 
 

 
.woman>.container>div:nth-child(2) span:nth-child(2) { 
 
    color: #000; 
 
    font-size: 16px; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    display: block; 
 
    margin: 20px 0px 0px 25px; 
 
} 
 

 
.woman>.container>div span:last-child { 
 
    color: #b1b1b3; 
 
    font-size: 14px; 
 
    text-transform: uppercase; 
 
    display: block; 
 
    margin: 0px 0px 0px 25px; 
 
} 
 

 
.woman>.container>div:nth-child(3) span:first-child { 
 
    position: relative; 
 
    text-transform: uppercase; 
 
    color: #000; 
 
    font-size: 16px; 
 
    text-transform: uppercase; 
 
    display: block; 
 
    left: 25px; 
 
    font-weight: bold; 
 
} 
 

 
.woman>.container>div:nth-child(3) span:last-child { 
 
    display: block; 
 
    position: relative; 
 
    left: 0; 
 
    color: #b1b1b3; 
 
    font-size: 14px; 
 
    text-transform: uppercase; 
 
} 
 

 
.woman>.container>img:hover+.item-desc~.message { 
 
    bottom: 0px; 
 
    visibility: visible; 
 
    transition: all 200ms ease-out; 
 
} 
 

 
.woman>.container>img:hover~.item-desc { 
 
    bottom: 100px; 
 
    transition: all 200ms ease-out; 
 
} 
 

 
.checkout { 
 
    position: absolute; 
 
    left: 120px; 
 
    top: 80px; 
 
    z-index: 1; 
 
} 
 

 
button.btn { 
 
    text-transform: uppercase; 
 
    background: transparent; 
 
    border: 2px solid #fff; 
 
    width: 165px; 
 
    height: 45px; 
 
    text-align: center; 
 
    color: #FFF; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    display: block; 
 
    margin-bottom: 20px; 
 
    z-index: 1; 
 
    visibility: hidden; 
 
} 
 

 
.woman>.container>img:hover~.checkout button.btn { 
 
    visibility: visible; 
 
} 
 

 
.checkout:hover button.btn { 
 
    visibility: visible; 
 
}

<div class="woman"> 
 
    <div class="container"> 
 
    <img src="https://i.imgur.com/BCGiTk3.jpg"> 
 
    <div class="item-desc"> 
 
     <span>$49</span> 
 
     <span>Fluted hem dress</span> 
 
     <span>Summer Dress</span> 
 
    </div> 
 
    <div class="message"> 
 
     <span>Sizes</span> 
 
     <span>XS, S, M, L, XL, XXL</span> 
 
    </div> 
 

 
    <div class="checkout"> 
 
     <button class="add btn">Add to cart</button> 
 
     <button class="view btn">View Cart</button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

私はいつも

NAV

タグを使用します。私はあなたにそれのためのCSSを送ります。

nav ul{ 
list-style-type: none; 
background-color: #b577b5; 
border: 4px solid #111111; 
border-radius: 10px; 
font-family: sans-serif; 
font-weight: bold; 
padding: 16px; 
} 
nav ul li { 
display: inline; 
border-right: 2px solid #111111; 
padding-right: 8px; 
padding-left: 8px; 
} 
nav ul li:last-child { 
border-right: none; 
} 
nav ul li a { 
text-decoration: none; 
color: #111111; 
} 

必要に応じてカスタマイズできます。私はdiv要素は、ページのロード時に示されている問題を再現できなかった

.checkout:hover button.btn { 
    visibility: visible; 
} 

：目に見えるメニューを保つために

Answer 3

変更ラインこれまで、あなたのCSSの131-133：

.woman:hover > .container > img ~ .checkout button.btn{ 
    visibility: visible; 
} 

これは代わりに：

.woman > .container > img:hover ~ .checkout button.btn 

は、

これはあなたがIMG上のボタンの上に置くと、あなたは、もはや（あなたの代わりに、ボタンの上にマウスを移動している）のimgにホバリングしていることではない理由

以下を参照してください。

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: "Open Sans"; 
 

 
} 
 

 
.right{ 
 
    float: right; 
 

 
} 
 

 
.woman{ 
 
    position: relative; 
 
} 
 

 
.woman > .container{ 
 
    margin: 30px 30px; 
 
    width: 333px; 
 
    height: 466px; 
 
    background:yellow; 
 
    position: relative; 
 
} 
 

 
.woman > .container > img{ 
 
    width:333px; 
 
} 
 

 
.woman > .container > .item-desc{ 
 
    position: absolute; 
 
    /*bottom: 100px;*/ 
 
    bottom: 0px; 
 
    height: 80px; 
 
    width: 100%; 
 
    background:#FFF; 
 
    transition: bottom 200ms ease-out; 
 
} 
 

 
.woman > .container > .message{ 
 
    position: absolute; 
 
    bottom: -100px; 
 
    height: 100px; 
 
    width: 100%; 
 
    background:#FFF; 
 
    transition: all 200ms ease-out; 
 
    visibility: hidden; 
 
} 
 

 
.woman > .container > div:nth-child(2) span:first-child{ 
 
    color: #5ff7d2; 
 
    font-size: 22px; 
 
    float: right; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    position: relative; 
 
    right: 20px; 
 
    top: 20px; 
 
} 
 

 
.woman > .container > div:nth-child(2) span:nth-child(2){ 
 
    color:#000; 
 
    font-size: 16px; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    display: block; 
 
    margin: 20px 0px 0px 25px; 
 
} 
 

 
.woman > .container > div span:last-child{ 
 
    color:#b1b1b3; 
 
    font-size: 14px; 
 
    text-transform: uppercase; 
 
    display: block; 
 
    margin: 0px 0px 0px 25px; 
 
} 
 

 
.woman > .container > div:nth-child(3) span:first-child{ 
 
    position: relative; 
 
    text-transform: uppercase; 
 
    color:#000; 
 
    font-size: 16px; 
 
    text-transform: uppercase; 
 
    display: block; 
 
    left: 25px; 
 
    font-weight: bold; 
 
} 
 

 
.woman > .container > div:nth-child(3) span:last-child{ 
 
    display: block; 
 
    position: relative; 
 
    left: 0; 
 
    color:#b1b1b3; 
 
    font-size: 14px; 
 
    text-transform: uppercase; 
 
} 
 

 
.woman > .container > img:hover + .item-desc ~ .message{ 
 
    bottom: 0px; 
 
    visibility: visible; 
 
    transition: all 200ms ease-out; 
 
} 
 

 
.woman > .container > img:hover ~ .item-desc{ 
 
    bottom: 100px; 
 
    transition: all 200ms ease-out; 
 
} 
 

 
.checkout{ 
 
    position: absolute; 
 
    left: 120px; 
 
    top: 80px; 
 
    z-index: 1; 
 
} 
 

 
button.btn{ 
 
    text-transform: uppercase; 
 
    background:transparent; 
 
    border: 2px solid #fff; 
 
    width: 165px; 
 
    height: 45px; 
 
    text-align: center; 
 
    color: #FFF; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    display: block; 
 
    margin-bottom: 20px; 
 
    z-index: 1; 
 
    visibility: hidden; 
 
} 
 

 
.woman:hover > .container > img ~ .checkout button.btn{ 
 
    visibility: visible; 
 
}

<div class = "woman"> 
 
      <div class = "container"> 
 
        <img src = "https://i.imgur.com/BCGiTk3.jpg"> 
 
        <div class = "item-desc"> 
 
         <span>$49</span> 
 
         <span>Fluted hem dress</span> 
 
         <span>Summer Dress</span> 
 
        </div> 
 
        <div class = "message"> 
 
         <span>Sizes</span> 
 
         <span>XS, S, M, L, XL, XXL</span> 
 
        </div> 
 

 
        <div class = "checkout"> 
 
         <button class = "add btn">Add to cart</button> 
 
         <button class = "view btn">View Cart</button> 
 
        </div> 
 
      </div> 
 
     </div>