カーソルでそれらを実行中であっても表示されている間に表示されているdivを作成する

私はコーディングに新しいです。状況：私はイメージの上を浮遊している間にCSSでdivを広げようとしています。これらのdivは画像の左側または右側に表示され、背景に関する情報が含まれます。 hereは私がベースとして使用したコードです。カーソルでそれらを実行中であっても表示されている間に表示されているdivを作成する

これまでのところすべてがうまくいきましたが、展開されたdivを実行して画像を「切り抜き」すると、divで表示されている限り表示されます。たとえ私がdivがどこにあったかの場所を巡っても、イメージを「引き離す」とすぐに見えないようにしたい。私はcssについての私のknowlegdeでこの問題を解決する方法を想像することはできません。英語は私の母国語ではないので、私は何か見落としたかもしれない。私は、可能な場合にのみ、cssを使用してソリューションを好むだろう。

Hereコードのjsfiddleバージョンがあります。

<body> 
<section id="imagegrid"> 
<div class="wrapper"> 
    <img src=" https://s3.postimg.org/qdqkkehvj/rot.png" /> 
    <div class="background-info-rechts"> 
    <div class="text">1</div> 
    </div> 
</div> 
<div class="wrapper"> 
    <img src="https://s3.postimg.org/4da83rz7j/orange.png" /> 
    <div class="background-info-links"> 
    <div class="text">2</div> 
    </div> 
</div> 
<div class="wrapper"> 
    <img src=" https://s3.postimg.org/fblhlynsv/gr_n.png" /> 
    <div class="background-info-rechts"> 
    <div class="text">3</div> 
    </div> 
</div> 
<div class="wrapper"> 
    <img src="https://s3.postimg.org/fzuc4wmin/blau.png" /> 
    <div class="background-info-links"> 
    <div class="text">4</div> 
    </div> 
</div> 
</section> 
</body>

CSS：

/*______________GRID______________*/ 

#imagegrid { 
padding: 0; 
list-style: none; 
position: relative; 
width: auto; 
} 

.wrapper { 
position: relative; 
float: left; 
width: 25%; 
width: -webkit-calc(100%/4); 
width: calc(100%/4); 
height: auto; 
} 

img { 
max-width: 100%; 
max-height: auto; 
} 


/*_________________FOLDOUT EFFECT________________*/ 

.background-info-rechts { 
position: absolute; 
left: 100%; 
top: 0; 
width: 100%; 
height: 100%; 
visibility: hidden; 
opacity: 0.2; 
transform-origin: 0% 50% 0px; 
transform: rotateY(-90deg); 
background-color: pink; 
} 

.background-info-links { 
position: absolute; 
right: 100%; 
top: 0; 
width: 100%; 
height: 100%; 
visibility: hidden; 
opacity: 0.2; 
transform-origin: 0% 50% 0px; 
transform: rotateY(-90deg); 
background-color: pink; 
} 

.background-info-rechts .text, 
.background-info-links .text { 
padding: 0px; 
} 

.wrapper:hover .graytocolor { 
visibility: visible; 
} 

.wrapper:hover .background-info-rechts, 
.wrapper:hover .background-info-links { 
transform: translate3d(0px, 0px, 0px) rotateY(0deg); 
transition: opacity 1s cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,-moz-transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms; 
visibility: visible; 
opacity: 1; 
z-index: 1; 
}

出典

2016-10-11 Mica S.

この背景情報*のdivは、ラッパーのdivの一部であるためです。これをあなたのCSSに追加してみてください：

.wrapper .background-info-rechts:hover, 
.wrapper .background-info-links:hover { 
    visibility: hidden; 
}

出典

2016-10-11 18:36:20

OMG、ありがとうございました！あなたの答えは問題を数秒で解決しました。ありがとうございました！ –

カーソルでそれらを実行中であっても表示されている間に表示されているdivを作成する

答えて

関連する問題