まだ、私はまだCSSとHTMLをかなり新しくしており、別の問題にぶつかっています。私の質問はすでにここで答えられているとは思えませんでしたが、誰かが尋ねられ答えられていることがわかったら、リダイレクトされることを願っています。とにかく、私はフレックスボックスを使用して、これらの3つのボックスを折り返しdiv要素内に水平に整列しようとしています。 3つのボックス自体は相対的に配置され、それぞれの中に1つの絶対的に配置された矩形があります。だからdivは3つのdivボックスを取り囲み、それぞれ1つの矩形divを囲んでいます。相対的Div要素が完全に配置された子に登録されていない
私は水平にそれらを揃えることができたが、私は問題を発見しました。 3つのボックスの内側にある四角形のdivは、ボックスの側面から「引き出す」ように設定され、正面のツールチップでバンドを形成します。私はまだ3番目のボックスで作業を開始していない。なぜなら、最初のボックスだけがどのように動作するのかが分かるからだ。 2番目のボックスは何らかの理由で機能しておらず、バンドの絶対的な位置がヘッダーにラッチされているようです。その箱の側から引き出すのではなく、画面の上から引き出しています。
私は最初のボックスを削除すると、2番目のボックスは途方も動作します。しかし、それらの両方が一緒に、最初の作品、そして2番目の破損。障害のあるボックスを2番目のdivにラップすると、問題を防ぐことができます。また、明らかに機能していないdivがどこにあるのかを見てみると、枠線が表示されず、divのHTML内に入力された文字がボックスの画像の外に表示されます。また、要素の下に小さな点があり、その上にホールドされたときにツールチップをトリガーするものもあります。
エラーの原因は何ですか？ 2つのボックスはどういうわけか相互に作用し合っているのですか？私は何かを逃したか？助けてください！
#bodyWrap {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
/* (1st) thumbnail begin */
.icon01 {
height: 177px;
width: 177px;
position: relative;
text-align: center;
background-color: #ff0000;
}
.icon01 img {
border: 1px solid #000000;
}
.expThumb {
position: relative;
top: 0;
opacity: 0;
visibility: hidden;
z-index: 3;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.tooltip {
position: absolute;
width: 0;
top: 25%;
bottom: 0;
left: 0;
right: 0;
color: #ffffff;
opacity: 0;
visibility: hidden;
z-index: 2;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.band {
position: absolute;
width: 0;
height: 88px;
top: 25%;
bottom: 0;
left: 0;
right: 0;
background: #000000;
opacity: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.icon01:hover .tooltip {
width: 177px;
visibility: visible;
opacity: 1;
}
.icon01:hover .band {
width: 178px;
visibility: visible;
opacity: 1;
}
.icon01:click .expThumb
/* (1st) thumbnail end */
/* (2nd) thumbnail begin */
.icon02 {
height: 177px;
width: 177px;
position: relative;
text-align: center;
background-color: #ff0000;
}
.icon02 img {
border: 1px solid #000000;
}
/* insert expanded image here
. {
\t position:absolute;
\t top:0;
\t opacity:0;
\t visibility:hidden;
\t z-index:6;
\t -webkit-transition: 0.2s;
\t -moz-transition: 0.2s;
\t -o-transition: 0.2s;
\t transition: 0.2s;
}
*/
.tooltip2 {
position: absolute;
width: 0;
top: 25%;
bottom: 0;
left: 0;
right: 0;
color: #ffffff;
opacity: 0;
visibility: hidden;
z-index: 5;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.band2 {
position: absolute;
width: 0;
height: 88px;
top: 25%;
bottom: 0;
left: 0;
right: 0;
background: #000000;
opacity: 0;
visibility: hidden;
z-index: 4;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.icon02:hover .tooltip2 {
width: 177px;
visibility: visible;
opacity: 1;
}
.icon02:hover .band2 {
width: 178px;
visibility: visible;
opacity: 1;
}
.icon02:click .expThumb2
/* (2nd) thumbnail end */<div id="bodyWrap">
<div class="icon01">
<a href="#info">
<img src="img/thumb.jpg" alt="box">
<img class="expThumb" src="img/thumb2.png">
<h2 class="tooltip">aTip</h2>
<div class="band"></div>
</a>
</div>
<div class="icon02">
<a href="#info">
<img src="img/thumb_announce.jpg" alt="box">
<img class="" src="">
<h2 class="tooltip2">aTip</h2>
<div class="band2"></div>
</a>
</div>
<div class="icon03">
<a href="#info">
<img src="img/thumb_announce.jpg" alt="box">
<img class="" src="">
<h2 class="tooltip3">aTip</h2>
<div class="band3"></div>
</a>
</div>
<div id="info" class="active">
<p>blahlbahlbahlbhalbhalbhalbhalbhalbhalbhalbhalah</p>
</div>
</div>
ありがとうございます。 '.icon01、.icon02、.icon03 {position：relative;}'を使うとツールヒントとバンドを置くことができましたが、2番目のボックスの下にまだ変なドットがあり、それを上に置くとツールチップが起動します。それが何であるか、どんな考えですか？ – Pyrrly
@Pyrrlyはあなたのデモで見えるでしょうか？私は点が表示されません。 –
心配しないで、私はそれを理解しました（私はそれが冗長性だと思いますか？）！ありがとうございました！エフェクトを組み合わせると効果的に機能し、より組織的な方法で処理できます。 :) #edit私はデモでそれを見たこともなく、再現することもできませんでした。 ：/私はそれがHTMLとCSSのいくつかの余分なテキストと関係していたと思います。 – Pyrrly