hover test

Test 1
Test 1 Contents
Test 2
Test 2 Contents
Test 3
Test 3 Contents
Test 4
Test 4 Contents
Test 5
Test 5 Contents
Test 6
Test 6 Contents











Important Notes:
It’s important to note that in this example, we establish the test content immediately after hover box. Sometimes that simply isn’t as useful. If you want to use a sibling that isn’t adjacent (but is still a sibling within the same parent element), replace the + symbol with a ~ symbol to achieve similar results. This technique is especially useful if you want multiple elements to have different effects on the style of one single sibling element (which means no content difference, just style).

Here is the simple HTML being used for the demo:

<div style="position:relative;">
<div class="testcontainer test0content"></div>

<div class="testbox test1">Test 1</div>
<div class="testcontainer test1content">Test 1 Contents</div>

<div class="testbox test2">Test 2</div>
<div class="testcontainer test2content">Test 2 Contents</div>

<div class="testbox test3">Test 3</div>
<div class="testcontainer test3content">Test 3 Contents</div>

<div class="testbox test4">Test 4</div>
<div class="testcontainer test4content">Test 4 Contents</div>

<div class="testbox test5">Test 5</div>
<div class="testcontainer test5content">Test 5 Contents</div>

<div class="testbox test6">Test 6</div>
<div class="testcontainer test6content">Test 6 Contents</div>

Here is the CSS being used:

.testcontainer {
position:absolute;
top:70px;
left:0px;
display:none;
border:2px solid black;
border-radius:15px;
padding:15px;
width:540px;
height:30px;
font-weight:bold;
color:white;
text-align:center;
font-size:20px;
}

.test0content {
background-color:white;
display:inline-block;
}

.test1content {
background-color:red;
}

.test2content {
background-color:green;
}

.test3content {
background-color:blue;
}

.test4content {
background-color:purple;
}

.test5content {
background-color:#4B1500;
}

.test6content {
background-color:black;
}

.testbox {
position:absolute;
display:inline-block;
border:2px solid black;
border-radius:15px;
padding:15px;
width:150px;
font-weight:bold;
color:white;
text-align:center;
font-size:20px;
}

.test1 {
top:0px;
left:0px;
background-color:red;
}

.test2 {
top:0px;
left:195px;
background-color:green;
}

.test3 {
top:0px;
left:390px;
background-color:blue;
}

.test4 {
top:140px;
left:0px;
background-color:purple;
}

.test5 {
top:140px;
left:195px;
background-color:#4B1500;
}

.test6 {
top:140px;
left:390px;
background-color:black;
}

div.test1:hover + div.test1content {display:inline-block;}
div.test2:hover + div.test2content {display:inline-block;}
div.test3:hover + div.test3content {display:inline-block;}
div.test4:hover + div.test4content {display:inline-block;}
div.test5:hover + div.test5content {display:inline-block;}
div.test6:hover + div.test6content {display:inline-block;}

hover test

GURPS Storage Sandbox Belrathius