Div Slide Interaktion

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

djheke

Das was du möchtest, wird sich alleine mit css nicht umsetzen lassen. Aber hier eine simple Alternative.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltipp</title>
<style>


article {
 background:#aaa;
 margin:1px 0;
 padding:0;
}


article h3 {
 margin:0;
 padding:3px;
}


article p {
 margin:0;
 padding:10px;
 background:#eee;
 display:none;
}


input {
 display:none;
}


label {
 padding:5px;
 margin:0px;
 display:inline-block;
 background:#eee;
 cursor:pointer;
}
input:nth-of-type(1):checked ~ article:nth-of-type(1) p,
input:nth-of-type(2):checked ~ article:nth-of-type(2) p,
input:nth-of-type(3):checked ~ article:nth-of-type(3) p,
input:nth-of-type(4):checked ~ article:nth-of-type(4) p {
 display:block;
}


input:nth-of-type(1):checked ~ label:nth-of-type(1),
input:nth-of-type(2):checked ~ label:nth-of-type(2),
input:nth-of-type(3):checked ~ label:nth-of-type(3),
input:nth-of-type(4):checked ~ label:nth-of-type(4) {
 background:#aaa;
}
</style> 
</head>
<body>


<input type="radio" id="b1" name="auswahl"><label for="b1">Tolltip 1</label>
<input type="radio" id="b2" name="auswahl"><label for="b2">Tolltip 2</label>
<input type="radio" id="b3" name="auswahl"><label for="b3">Tolltip 3</label>
<input type="radio" id="b4" name="auswahl"><label for="b4">Tolltip 4</label>






<article>
<h3>Text 1</h3>
<p>text von Link 1</p>
</article>


<article>
<h3>Text 2</h3>
<p>text von Link 2</p>
</article>


<article>
<h3>Text 3</h3>
<p>text von Link 3</p>
</article>


<article>
<h3>Text 4</h3>
<p>text von Link 4</p>
</article>
</body>
</html>

Alles anzeigen

Habe mal versucht dein Vorhaben mit css umzusetzen. Wenn ich es richtig verstanden habe, soll Box4 nur bein ersten Seitenaufruf einzeln aufklappen. Ansonsten nicht?

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltipp</title>
<style>


article {
 background:#aaa;
 margin:1px 0;
 padding:0;
}


article h3 {
 margin:0;
 padding:3px;
}


article p {
 margin:0;
 padding:10px;
 background:#eee;
 display:block;
}


input {
 display:none;
}


label {
 padding:5px;
 margin:0px;
 display:inline-block;
 background:#eee;
 cursor:pointer;
}


input:nth-of-type(1):checked ~ label:nth-of-type(4),
input:nth-of-type(1):checked ~ article:nth-of-type(2) p,
input:nth-of-type(1):checked ~ article:nth-of-type(3) p,
input:nth-of-type(1):checked ~ article:nth-of-type(4) p {
 display:none;
}


input:nth-of-type(2):checked ~ label:nth-of-type(4),
input:nth-of-type(2):checked ~ article:nth-of-type(1) p,
input:nth-of-type(2):checked ~ article:nth-of-type(3) p,
input:nth-of-type(2):checked ~ article:nth-of-type(4) p {
 display:none;
}


input:nth-of-type(3):checked ~ label:nth-of-type(4),
input:nth-of-type(3):checked ~ article:nth-of-type(1) p,
input:nth-of-type(3):checked ~ article:nth-of-type(2) p,
input:nth-of-type(3):checked ~ article:nth-of-type(4) p {
 display:none;
}






input:nth-of-type(5):checked ~ article:nth-of-type(1) p,
input:nth-of-type(5):checked ~ article:nth-of-type(2) p,
input:nth-of-type(5):checked ~ article:nth-of-type(3) p {
 display:none;
}


input:nth-of-type(5) ~ label:nth-of-type(5),
input:nth-of-type(4) ~ article:nth-of-type(4) p {
 display:none;
}




input:nth-of-type(4):checked ~ article:nth-of-type(4) p,
input:nth-of-type(5):checked ~ article:nth-of-type(4) p {
 display:block;
}


input:nth-of-type(1):checked ~ label:nth-of-type(5),
input:nth-of-type(2):checked ~ label:nth-of-type(5),
input:nth-of-type(3):checked ~ label:nth-of-type(5) {
 display:inline-block;
}


input:nth-of-type(1):checked ~ label:nth-of-type(1),
input:nth-of-type(2):checked ~ label:nth-of-type(2),
input:nth-of-type(3):checked ~ label:nth-of-type(3),
input:nth-of-type(4):checked ~ label:nth-of-type(4),
input:nth-of-type(5):checked ~ label:nth-of-type(5) {
 background:#aaa;
}
</style> 
</head>
<body>




<input type="radio" id="b1" name="auswahl"><label for="b1">Tolltip 1</label>
<input type="radio" id="b2" name="auswahl"><label for="b2">Tolltip 2</label>
<input type="radio" id="b3" name="auswahl"><label for="b3">Tolltip 3</label>
<input type="radio" id="b4" name="auswahl"><label for="b4">Tolltip 4</label>
<input type="radio" id="b5" name="auswahl"><label for="b5">Tolltip 4</label>




<article>
<h3>Text 1</h3>
<p>text von Link 1</p>
</article>


<article>
<h3>Text 2</h3>
<p>text von Link 2</p>
</article>


<article>
<h3>Text 3</h3>
<p>text von Link 3</p>
</article>


<article>
<h3>Text 4</h3>
<p>text von Link 4</p>
</article>
</body>
</html>

Alles anzeigen

modem-kind

Hollo djheke ,
ich wollte nochmal fragen..
unabhängig davon das er hier ja besondere Funktions Wünsche hatte...
( auch so einer der sich nicht mehr gemeldet hat - nebenbei gesagt - tzz )

Also : warum Du es mit input type="radio" // :checked - gemacht hast -

es funktioniert ja gut - will nix sagen -

wollt nur wissen warum grad damit ..
statt vielleicht mit

.eins, .zwei , .drei , .vier
{
display: none;
}

.eins:target , .zwei:target , .drei:target , .vier:target
{
display: block;
}

<body>

<a href=#eins> Eins Anzeigen </a>
<a href=#zwei> ZweiAnzeigen </a> ... usw.

<article id="eins" class="eins"> text von eins </article>
<article id="zwei" class="zwei"> text von zwei</article>

................ usw -

gemacht hast ?

gibt es dafür einen oder mehr besondere Gründe -- ?

Gruß modem-kind

djheke

Weil mit :target die URL manipuliert wird und mit :checked nicht. Prinzipell geht es aber auch mit :target. Nebenbei bemerkt, ist das gewünschte Vorhaben aus meiner Sicht sowieso Sinnfrei. Und wenn er es unbedingt haben möchte, wäre wohl JQuery die bessere Wahl

modem-kind

Jo stimmt beides - !

bei :target muss man zudem auch noch über den Umweg gehen
über
<a href="#id">hüpf dahin</a>

aufs Element und dann eine class in dem haben das dann :target wird -
ansonsten springt das Ziel immer an den View-top was sehr nervt -

da ist radio checked schon besser -

ansonsten würde ich auch zu JQuery tendieren -
Viel mehr Möglichkeiten -
und wers aus hat - hat eben Pech -
allerdings sind das wenige.. die meisten User wissen gar nicht was das ist
u wie es an u. aus geht -
bzw. Interessiert se auch nicht -

--
eigentlich ist das ja sowie nicht Tooltipps
sondern Accordion - ( was man natürlich Tooltipp nennen kann )

Tooltipps ist >>> titel="xyz"

und gut ist auch..
data-blabla="Hello World"

das lässt sich auch schön gestalten..
über css

was bei titel ja gar nicht geht.. Eignung daher max nur fürn <a link Zusatz Erklärung

Oki schönen Abend Dir + Danke
modem-kind

PS. es kommt ja auch immer auf den Content an den man darin braucht oder will
/ Menge / Format/ierung / Bilder /+~ Größe usw.
evtl. käme ein Modal vllt. eher besser -

Tags