Witam Wszystkich :)
Mam problem po najechaniu na diva (dna) obraz się rusza i super ale po najechaniu na menu listy nav ul > li > a ktore znajduje sie na tym divie dna nie rusza a chciałbym żeby dopiero po najechaniu na nav ul > li > a div dna zaczął się ruszać....Bardzo proszę o pomoc..
body, html {
background: white;
height: 100%;
width: 100%;
overflow: hidden;
}
.container {
perspective: 0px;
position: absolute;
left:10%;
top: 0px;
transform-style: preserve-3d;
z-index:;
}
.dna:hover {
position: absolute;
width: 100%;
animation: dna-spin 9s infinite linear both;
transform-style: preserve-3d;
z-index:2;
}
.dna-part{
width: 200px;
transform: translateX(-50%);
height: 4px;
background: rgba(0, 99, 0, 0.3);
position: relative;
transform-style: preserve-3d;
z-index: ;
}
.dna-part:nth-child(50) {
top: 400px;
transform: translateX(-50%) rotateY(750deg);
}
.dna-part:nth-child(49) {
top: 392px;
transform: translateX(-50%) rotateY(735deg);
}
.dna-part:nth-child(48) {
top: 384px;
transform: translateX(-50%) rotateY(720deg);
}
.dna-part:nth-child(47) {
top: 376px;
transform: translateX(-50%) rotateY(705deg);
}
.dna-part:nth-child(46) {
top: 368px;
transform: translateX(-50%) rotateY(690deg);
}
.dna-part:nth-child(45) {
top: 360px;
transform: translateX(-50%) rotateY(675deg);
}
.dna-part:nth-child(44) {
top: 352px;
transform: translateX(-50%) rotateY(660deg);
}
.dna-part:nth-child(43) {
top: 344px;
transform: translateX(-50%) rotateY(645deg);
}
.dna-part:nth-child(42) {
top: 336px;
transform: translateX(-50%) rotateY(630deg);
}
.dna-part:nth-child(41) {
top: 328px;
transform: translateX(-50%) rotateY(615deg);
}
.dna-part:nth-child(40) {
top: 320px;
transform: translateX(-50%) rotateY(600deg);
}
.dna-part:nth-child(39) {
top: 312px;
transform: translateX(-50%) rotateY(585deg);
}
.dna-part:nth-child(38) {
top: 304px;
transform: translateX(-50%) rotateY(570deg);
}
.dna-part:nth-child(37) {
top: 296px;
transform: translateX(-50%) rotateY(555deg);
}
.dna-part:nth-child(36) {
top: 288px;
transform: translateX(-50%) rotateY(540deg);
}
.dna-part:nth-child(35) {
top: 280px;
transform: translateX(-50%) rotateY(525deg);
}
.dna-part:nth-child(34) {
top: 272px;
transform: translateX(-50%) rotateY(510deg);
}
.dna-part:nth-child(33) {
top: 264px;
transform: translateX(-50%) rotateY(495deg);
}
.dna-part:nth-child(32) {
top: 256px;
transform: translateX(-50%) rotateY(480deg);
}
.dna-part:nth-child(31) {
top: 248px;
transform: translateX(-50%) rotateY(465deg);
}
.dna-part:nth-child(30) {
top: 240px;
transform: translateX(-50%) rotateY(450deg);
}
.dna-part:nth-child(29) {
top: 232px;
transform: translateX(-50%) rotateY(435deg);
}
.dna-part:nth-child(28) {
top: 224px;
transform: translateX(-50%) rotateY(420deg);
}
.dna-part:nth-child(27) {
top: 216px;
transform: translateX(-50%) rotateY(405deg);
}
.dna-part:nth-child(26) {
top: 208px;
transform: translateX(-50%) rotateY(390deg);
}
.dna-part:nth-child(25) {
top: 200px;
transform: translateX(-50%) rotateY(375deg);
}
.dna-part:nth-child(24) {
top: 192px;
transform: translateX(-50%) rotateY(360deg);
}
.dna-part:nth-child(23) {
top: 184px;
transform: translateX(-50%) rotateY(345deg);
}
.dna-part:nth-child(22) {
top: 176px;
transform: translateX(-50%) rotateY(330deg);
}
.dna-part:nth-child(21) {
top: 168px;
transform: translateX(-50%) rotateY(315deg);
}
.dna-part:nth-child(20) {
top: 160px;
transform: translateX(-50%) rotateY(300deg);
}
.dna-part:nth-child(19) {
top: 152px;
transform: translateX(-50%) rotateY(285deg);
}
.dna-part:nth-child(18) {
top: 144px;
transform: translateX(-50%) rotateY(270deg);
}
.dna-part:nth-child(17) {
top: 136px;
transform: translateX(-50%) rotateY(255deg);
}
.dna-part:nth-child(16) {
top: 128px;
transform: translateX(-50%) rotateY(240deg);
}
.dna-part:nth-child(15) {
top: 120px;
transform: translateX(-50%) rotateY(225deg);
}
.dna-part:nth-child(14) {
top: 112px;
transform: translateX(-50%) rotateY(210deg);
}
.dna-part:nth-child(13) {
top: 104px;
transform: translateX(-50%) rotateY(195deg);
}
.dna-part:nth-child(12) {
top: 96px;
transform: translateX(-50%) rotateY(180deg);
}
.dna-part:nth-child(11) {
top: 88px;
transform: translateX(-50%) rotateY(165deg);
}
.dna-part:nth-child(10) {
top: 80px;
transform: translateX(-50%) rotateY(150deg);
}
.dna-part:nth-child(9) {
top: 72px;
transform: translateX(-50%) rotateY(135deg);
}
.dna-part:nth-child(8) {
top: 64px;
transform: translateX(-50%) rotateY(120deg);
}
.dna-part:nth-child(7) {
top: 56px;
transform: translateX(-50%) rotateY(105deg);
}
.dna-part:nth-child(6) {
top: 48px;
transform: translateX(-50%) rotateY(90deg);
}
.dna-part:nth-child(5) {
top: 40px;
transform: translateX(-50%) rotateY(75deg);
}
.dna-part:nth-child(4) {
top: 32px;
transform: translateX(-50%) rotateY(60deg);
}
.dna-part:nth-child(3) {
top: 24px;
transform: translateX(-50%) rotateY(45deg);
}
.dna-part:nth-child(2) {
top: 16px;
transform: translateX(-50%) rotateY(30deg);
}
.dna-part:nth-child(1) {
top: 8px;
transform: translateX(-50%) rotateY(15deg);
}
.dna-part:after, .dna-part:before {
position: absolute;
top: -20px;
width: 70px;
height: 30px;
border-radius: 20px 20px;
content: "";
}
.dna-part:after {
left: 90%;
background: #ff0000;
transform: rotateY(100deg);
}
.dna-part:before {
right: 90%;
background: #00aced;
transform: rotateY(100deg);
}
@keyframes counter-spin-dot {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-359deg);
}
}
@keyframes dna-spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(359deg);
}
}
/*nawigacja menu*/
nav {
padding:0% ;
/* odsunięcie na zero */
margin: 1px;
/* marginesy na zero */
width: 123px;
/* szerokość */
z-index: ;
}
nav ul {
padding: 1px;
/* odsunięcie 0 */
margin: 0px;
/* marginesy 0 */
}
nav ul > li {
list-style-type: none;
display: block;
padding: 2px;
z-index:1 ;
}
nav ul > li > a {
text-decoration: none;
/* kolor tła */
width: 100px;
/* szerokość */
text-align: center;
/* wyrównanie */
display: inline-block;
/* wyświetlanie jako element liniowy blokowy */
padding: 23px;
/* odsunięcie z wszystkich stron na 10px */
/* wyłączenie domyślnej dekoracji tekstu */
font-weight: bolder;
background: ;
font-size: 1.4em;
color: black;
/* kolor czcionki */
position: relative;
z-index: 1;
font-weight: bold;
font-family: 'Roboto Slab', serif;
}
nav ul > li > ol{
list-style-type:none;
padding-top: 3em;
margin: -6em;
display: none;
position: fixed;
z-index: 1;
font-family: 'Roboto Slab', serif;
}
nav ul > li:hover > ol{
display: inline-block;
}
nav ul > li > ol > li:before
{
content: "";
width: 150px;
height: 170px;
position: absolute;
left:220px;
top: 0;
-webkit-clip-path: polygon(34% 3%, 100% 23%, 100% 81%, 33% 94%, 9% 45%, 9% 45%);
clip-path: polygon(34% 3%, 100% 23%, 100% 81%, 33% 94%, 9% 45%, 9% 45%);
background: rgba(0, 204, 0, 0.2);
}
nav ul > li > ol > li:after {
content: "";
width: 200px;
height: 200px;
left: 370px;
position: absolute;
top: 0;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 26%, 100% 93%, 50% 100%, 0% 69%, 0% 19%);
background:rgba(0, 122, 255, 0.4);
}
nav ul > li > ol > li ::after{
content: "";
width: 334px;
height: 270px;
left: 571px;
position: absolute;
top: 0;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 69%, 0% 19%);
background:yellow;
z-index: -1;
}
ol > li > a {
text-decoration: none;
z-index: 2;
margin: 34em;
color:black;
}
