4 x 4 mitFlex
Ich habe im anderen Forum ein 4 x 4 Boxen Feld gesehen. Sobald man mit Maus über die Boxen ging, wurde ein Extra Kasten untendrunter aufgemacht . Ich wollte das gerne auch haben, nur wahr das Problem das es im Grid Layout geschrieben ist und mein Browser das nicht kann bzw. Falsch anzeigt.
Kann mir das einer in Flexbox Style übersetzten oder mir erklären, wie das geht. Wie ich gesehen habe wurde da auch kein Javascript für benutzt. Aber ich möchte in späteren Verlauf da mit Javascript drauf zugreifen.Wäre schön das man das schon mit reinschreiben kann.
Der hier verwendete Code
<style>
ul{
display:none;
width:50vw;
height:12.4vw;
position:absolute;
left:0px;
margin-top:11vw;
z-index:2;
border:1px solid black;
}
#wrapper{
display:flex;
flex-direction:column;
width:52vw;
height:52vw;
}
.reihe{
flex:1;
display:flex;
flex-direction:row;
}
.box{
flex:1;
border:1px solid black;
margin:2px;
cursor:pointer;
}
.box:hover>ul{
display:block;
background:red;
}
#wrapper2{
border:1px solid black;
height:45vw;
width:45vw;
}
#superwrapper{
display:flex;
text-align:center;
}
textarea{
width:80%;
height:30%;
text-align:center;
}
</style>
<script src="/js_webseite/jquery.js"></script>
<div id="superwrapper">
<div id="wrapper">
<div id="reihe1" class="reihe">
<div class="box" id="box1"><p>
1
</p><ul>aa1</ul></div>
<div class="box" id="box2"><p>
2
</p><ul>aa2</ul></div>
<div class="box" id="box3"><p>
3
</p><ul>aa3</ul></div>
<div class="box" id="box4"><p>
4
</p><ul>aa4</ul></div>
</div>
<div id="reihe2" class="reihe">
<div class="box" id="box5"><p>
5
</p><ul>aa5</ul></div>
<div class="box" id="box6"><p>
6
</p><ul>aa6</ul></div>
<div class="box" id="box7"><p>
7
</p><ul>aa7</ul></div>
<div class="box" id="box8"><p>
8
</p><ul>aa8</ul></div>
</div>
<div id="reihe3" class="reihe">
<div class="box" id="box9"><p>
9
</p><ul>aa9</ul></div>
<div class="box" id="box10"><p>
10
</p><ul>aa10</ul></div>
<div class="box" id="box11"><p>
11
</p><ul>aa11</ul></div>
<div class="box" id="box12"><p>
12
</p><ul>aa12</ul></div>
</div>
<div id="reihe4" class="reihe">
<div class="box" id="box13"><p>
13
</p><ul>aa13</ul></div>
<div class="box" id="box14"><p>
14
</p><ul>aa14</ul></div>
<div class="box" id="box15"><p>
15
</p><ul>aa15</ul></div>
<div class="box" id="box16"><p>
16
</p><ul>aa16</ul></div>
</div>
</div>
<div id="wrapper2"><h1></h1>
<h2>
Text eingabe für die Box
</h2>
<p>
Gebe ein Text ein ,und er wird box, und unterbox erscheinen</p>
<textarea id="intext"></textarea><br>
<input type="number" min="1" max="16" id="textrein" placeholder="boxnummer"><button id="los">
Eintragen
</button>
</div>
</div>
<script>
h=$('.box').hover(function(){
$('h1').html('Sie hover box mit der id '+this.id+'<br>Mit den Inhalt ');
})
$('#los').click(function(){
ine=$('#intext').val();
tex=$('#textrein').val();
$('#box'+tex+'').find('p').html(ine);
$('#box'+tex+'').find('ul').html(ine);
})
</script>