0
在我的html頁面中，我有一個工具提示內容（僅由CSS元素構建而沒有javascript）。 我打算插入一個單一的手風琴內容（僅由css構建），當它被點擊時，在工具提示內容中向上滾動。沒有出現工具提示popbox區域內的手風琴
這裏是我的CSS和HTML代碼示例：
<html>
<head>
<!-- SOURCE accordion CSS jsfiddle.net/m_raffaele/E4acF/ -->
<!-- SOURCE tooltip CSS http://inserthtml.com/demo/pop-in-dialogue/ -->
<style>
.id-content {
width: 608px; height: 854px;
margin:0 auto;
background:yellow;
}
/* TOOLTIP Bawah */
.container-2b {
width:608px; height:854px;
position: relative;
float:right;
z-index:15;
margin: 0 auto;
}
.container-2b input {
display: none;
}
.container-2b input:checked + .popbox-2b {
opacity: 0.9;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
font-variant: normal;
padding:10px 5px 5px 5px;
}
/* ICON klik url(../../images/idsirtii/b4tap.jpg); background-size:99px 130px;*/
.container-2b label {
width:99px; height:130px;
position: relative;
float:right; margin-top:-182px;
background-color:green;
}
.container-2b label:checked + {
width:99px; height:130px;
position: relative;
float:right;
background-color:red;
}
/*buat kotak tooltip POP UP yg muncul*/
.popbox-2b {
width:598px; height: 830px; background: grey;
border: 1px solid transparent; opacity: 0;
position: relative;
margin-top:-182px;
z-index: 10;
color:white;
font-size:12px; font-family: "scada-regular"; color:white;
text-align:center; line-height:1.5em;
box-shadow-opacity;0.5;
/*gradien warna
box-shadow: inset 0px 40px 60px -30px rgba(200,200,255,1), 0px 0px 20px rgba(0,0,0,0.1);
/* border-radius: 7px; efek ujung tumpul */
-moz-perspective: 1000;
-ms-perspective: 1000;
-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-webkit-transition: all fade;
-moz-transition: all fade;
-ms-transition: all fade;
}
/*****************************************
ACCORDION TAB
******************************************/
/*
*
* Author: Michael Raffaele <[email protected]>
* Date: 25th October 2011
* Info: http://www.mraffaele.com/blog/2011/10/25/css-accordion-no-javascript/
*
*/
/* Shared for all accordion types margin-top:-500px; */
.accordion {
width:550px;
font-family:"strait"; font-size:14px;
margin:0 auto;
background:#fcf;
position:absolute;
bottom: 0px;
}
.accordion ul {
list-style:none;
margin:0;
padding:0;
}
.accordion li {
margin:0;
padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion label {
position:relative; bottom:0;
background:blue; display:block;
cursor:pointer;
font-size:16px; color:white; line-height:16px;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
text-transform:uppercase;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
background:red;
color:#FFF;
}
.accordion .content-acc {
padding:0 10px;
overflow:hidden;
border:1px solid #fff; /* Make the border match the background so it fades in nicely */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
}
.accordion p {
color:red;
margin:0 0 10px;
}
.accordion h3 {
color:blue;
padding:0;
margin:10px 0;
}
/* Vertical */
.vertical ul li {
overflow:hidden;
margin:0 0 1px;
}
.vertical ul li label {
padding:10px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
border-bottom:0;
}
.vertical ul li label:hover {
/* border:1px solid #542437; We don't want the border to disappear on hover */
}
.vertical ul li .content-acc {
height:0px;
border-top:0;
}
.vertical [type=radio]:checked ~ label ~ .content-acc, .vertical [type=checkbox]:checked ~ label ~ .content-acc {
height:300px;
/*border:1px solid #542437; */
}
</style>
</head>
<body>
<div class="id-content">
<!--TOOLTIP-->
<div class="container-2b">
<label for="activate-2b" class="container-2b"></label>
<input type="checkbox" name="activate-2b" id="activate-2b" />
<div class="popbox-2b"></div>
</div>
<!--div TOOLTIP-->
<!--ACCORDION-->
<div class="accordion vertical">
<ul>
<li>
<input type="checkbox" id="checkbox-1" name="checkbox-accordion" />
<label for="checkbox-1">This is an example accordion item</label>
<div class="content-acc">
<br/ >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem
luctus porttitor vestibulum, eros sapien mattis libero, euismod congue
neque nisi at ipsum. Mauris semper ipsum sit amet metus semper
malesuada. Donec vel est justo, ac porta diam.</p>
</div>
</li>
</ul>
</div>
</body>
</html>
但是，當我把「手風琴垂直」工具提示「彈出box2b」裏面的div手風琴似乎出現無處，沒有內tooltip'pop-box2b'區域，我找不到它的位置。
這兩個內容（工具提示&手風琴）都使用複選框。
可能是因爲我在同一頁面中使用了2個複選框嗎？
如果我錯誤地放置/修改手風琴內容，有人能幫我找到該代碼中是否有錯誤嗎？
爲什麼手風琴不會出現，如果我把它放在工具提示popbox區域內？
THX @Gavin伍德給我一個清晰的樣品我:) 這就是我的意思，以鍛鍊身體。 我會修改一些位置和其他動畫的東西 – ask91
這裏是我的意思是