Beiträge von Darkomen

Darkomen

Hey, wäre super wenn mir jemand helfen könnte~

Ich würde gerne ein box für tooltips anlegen (link4) welche nicht die vorherige content box (link1 - 3) schließt sondern zusätzlich aufgeht und nur gewechselt/geschlossen wird wenn ein anderes Word/(link1 - 3) angeklickt wird

(Tooltip boxen sollten untereinander wechseln und verschwinden wenn eine andere Hauptbox aufgerufen wird.)

Mfg

HTML

<style type="text/css">
.pfor { display: none; }
#profile { background-color: transparent; border: none; }


</style>
 
<style type="text/css">
 body {
 
background-color: #fff;
background-image: url();


background-color:#000000;
background-attachment: fixed;
background-position:
background-repeat: repeat;
background-size: cover;
font-family: Gabriola;
font-variant: normal;
font-size: 70%;
color: #666666;
overflow: hidden;}
 
::-webkit-scrollbar {
 width: 3px;
 height: 0px;
 background: ;
 }
 
 ::-webkit-scrollbar-thumb {
 background-color: black;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 }
 
 
a {color: #DADDC2; text-decoration: none; }
 
a:hover {color: ; text-decoration: underline;
cursor: url('http://media.tumblr.com/e7f72e808c4dbe5006b9c3a30dbc9b79/tumblr_inline_mh67vhwGnR1rdqsqf.png');}
*{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;}
 
b {color: 
#A80000;}


.abox {background-color: #ffffff; color: #000; font-size: 18px; font-family: 'Gabriola'; text-align: justify; position: absolute; width:360; height:302; left: 55; top:272; letter-spacing: .2px; line-height: 12px; padding: 3px; padding-left:10px; padding-right:10px; margin: 1px; overflow:hidden;}
.bbox {background-color:#ffffff ; color: #000; font-size: 18px; font-family: 'Gabriola'; text-align: justify; position: absolute; top:0;left:110 ;width:100%; height:100%; letter-spacing: .2px; line-height: 12px; padding: 3px; padding-left:10px; margin: 0px; overflow:hidden;}
.cbox {background-color: #ffffff; color: #000; font-size: 18px; font-family: 'Gabriola'; text-align: justify; position: absolute; width:360; height:151; left: 55; top:576; letter-spacing: .2px; line-height: 12px; padding: 3px; padding-left:10px; padding-right:10px; margin: 1px; overflow:hidden;}


.navbar {Background-color: transparent; Position: absolute; Height: 230px; Width: 14px; Left: 260; top: 18; padding: 4px; z-index: 100;}
 
.link1 {Position: absolute; Left: 4px; Top:10; Border: solid 2px #000; Height: 10px; Width: 10px; background-color: #ffffff;}
 
.link2 {Position: absolute; Left: 4px; Top:70; Border: solid 2px #000; Height: 10px; Width: 10px; background-color: #ffffff;}
 
.link3 {Position: absolute; Left: 4px; Top:130; Border: solid 2px #000; Height: 10px; Width: 10px; background-color: #ffffff;}
 
.link4 {Position: absolute;}


.link5 {Position: absolute; Left: 4px; Top:190; Border: solid 2px #000; Height: 10px; Width: 10px; background-color: #ffffff;}
 
.link1:hover {Background-color: #ffffff;}
.link2:hover {Background-color: #ffffff;}
.link3:hover {Background-color: #ffffff;}
.link4:hover {Background-color: #ffffff;}
.link5:hover {Background-color: #ffffff;}
 
.slide {Position: fixed; Height: 555555; Width: 555555; Top: 0px; Left: 55; Z-index: -1; Opacity: 0; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}
 
.slide:target {left: 0; Opacity: 1; Z-index: 1; transition: 1.4s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}


.slide1 {Position: fixed; Height: 555555; Width: 555555; Top: 0px; Left: 55; Z-index: -1;  Opacity: 0; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s; }
 
.slide1:target {left: 0; Opacity: 1; Z-index: 1; transition: 1.4s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}
 
#icon img { position:absolute; top: 10px; left: 20; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; border: 1px solid ;}




 
#icon img.top:hover { opacity:0;}


h1 { Color: #000; font-family: 'Poiret One', cursive; text-align: center; font-size:15px; Margin-top: 3px; Border-left: 15px double #AD0000 ; Border-right: 15px double #A80000; Border-bottom: 1px solid black;}
 .tooltip {
 position: relative;
 display: inline-block;
 border-bottom: 1px dashed #DA7D83;
}


.tooltip .tooltiptext {
 visibility: hidden;
 width: 160px;
 background-color: rgba(0.0);
 color: #DADDC2;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;






 position: absolute;
 left: 90px;
 top: -15px;
 z-index: 1;
}


.tooltip:hover .tooltiptext {
 visibility: visible;
}


 


</style>




 
<div id="icon">
<img class="bottom" src="" height="230" width="230">


</div>


 


 
<div class="navbar">
<a class="link1" href="#1"></a>
<a class="link2" href="#2"></a>
<a class="link3" href="#3"></a>
<a class="link5" href="#5"></a>
</div></div>
 
<div id="1" class="slide">
<div class="abox">
<a class="link4" href="#4">LINK Here</a>
</div></div>


<div id="2" class="slide">
<div class="abox">
</div></div>
 
<div id="3" class="slide">
<div class="abox">
</div></div>


<div id="4" class="slide1">
<div class="cbox">
</div></div>




</div></div></div></div>

Alles anzeigen