Waarom is het zweven boven een CSS van invloed op mijn andere CSS-elementen?

Laat me eerst mijn excuses aanbieden, want mijn vraag is misschien te lang om te lezen. Maar ik wilde mijn probleem duidelijk uitleggen en daarom is de lange beschrijving van deze vraag. Ga alsjeblieft door de codes die ik heb bijgevoegd en help me alsjeblieft om de fouten te corrigeren.

Ik ben een amateur-ontwerper die niet zozeer webontwerp is, maar ik wilde mijn eigen pagina ontwerpen. Ik heb de hulp van Google doorstaan ​​en verschillende tutorials op internet doorlopen, en het is mij gelukt om mijn pagina's te ontwerpen. Maar ik zit vast op deze DOWNLOAD-PAGINA! vooral met de DOWNLOAD KNOPEN.

http://dl.dropbox.com/u/20461226/download%20page.jpg

This is how I intend to have my download page. When an user hovers over any particular DOWNLOAD BUTTON of any particular edition of our magazine, the wings will open up, one at the top of the download button & the other at the bottom. And when the user clicks on the button, he/she will be able to download the compressed.RAR version of that particular magazine edition. I learnt designing this download button from "http://designshack.net/articles/css/downloadbutton/ " and this is how the effect will be : "http://designshack.net/tutorialexamples/animatedDownload/index.html "

Het lukte me om met succes de individuele downloadknoppen voor elke editie te bouwen, met exacte locaties in de CSS. Maar wanneer ik alle knoppen voor de pagina in één html en één CSS probeer te integreren, gaat alles mis. d.w.z. WANNEER IK OVER DE EERSTE DOWNLOAD KNOP GAAN, in plaats van dat de vleugels opengaan voor die bepaalde 1e downloadknop, gaan de vleugels open bij de laatste knop!

Dit is mijn HTML:



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="button.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div class="button1">
  Download
  

Click to begin

7.54 MB .RAR

</div> <body> <div class="button2"> Download

Click to begin

7.8 MB .RAR

</div> <div class="button3"> Download

Click to begin

7.05 MB .RAR

</div> </body> </html>

DIT IS MIJN CSS:

.button1 a {
  display: block;
  position:absolute;
    left:430px;
    top:410px;
  height: 28px;
  width: 115px;
  background: #22232e;
  -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
   -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
        box-shadow: 0px 0px 8px rgba(0,0,0,0.2);


background: -moz-linear-gradient(top, #22232e 0%, #623043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22232e), color-stop(100%,#623043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #22232e 0%,#623043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #22232e 0%,#623043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #22232e 0%,#623043 100%); /* IE10+ */
background: linear-gradient(top, #22232e 0%,#623043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22232e', endColorstr='#623043',GradientType=0 ); /* IE6-9 */


  /*TYPE*/
  color: white;
  font: bold 11px/28px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase; 
}

p {
  background: #5a8a37;
  display: block;
  height: 25px;
  width: 105px; 
  margin: 0px 0 0 5px;

  /*TYPE*/
  text-align: center;
  font: bold 10px/25px Helvetica, Verdana, sans-serif;
  color: #0e1807;

  /*POSITION*/
  position:absolute;
    left:430px;
    top:410px;
  z-index: -1;

  /*CSS3*/
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

-webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
          transition: all 0.4s ease;          
}


.button1:hover .top {
  margin: -23px 0 0 5px;
  line-height: 25px;
}

.button1:hover .bottom {
  margin: 25px 0 0 5px;
}

.button1 a:active {
background: #22232e; 
background: -moz-linear-gradient(top, #22232e 0%, #623043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22232e), color-stop(100%,#623043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #22232e 0%,#623043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #22232e 0%,#623043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #22232e 0%,#623043 100%); /* IE10+ */
background: linear-gradient(top, #22232e 0%,#623043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22232e', endColorstr='#623043',GradientType=0 ); /* IE6-9 */
}

/*Pulls in Wings*/
.button1:active .bottom {
  margin: 25px 0 0 5px;
}

.button1:active .top {
  margin: -23px 0 0 5px;
}


.button2 a {

  display: block;
  position:absolute;
    left:632px;
    top:410px;
  height: 28px;
  width: 115px;
  background: #22232e;
  -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
   -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
        box-shadow: 0px 0px 8px rgba(0,0,0,0.2);


background: -moz-linear-gradient(top, #22232e 0%, #623043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22232e), color-stop(100%,#623043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #22232e 0%,#623043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #22232e 0%,#623043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #22232e 0%,#623043 100%); /* IE10+ */
background: linear-gradient(top, #22232e 0%,#623043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22232e', endColorstr='#623043',GradientType=0 ); /* IE6-9 */


  /*TYPE*/
  color: white;
  font: bold 11px/28px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase; 
}

p {
  background: #5a8a37;
  display: block;
  height: 25px;
  width: 105px; 
  margin: 0px 0 0 5px;

  /*TYPE*/
  text-align: center;
  font: bold 10px/25px Helvetica, Verdana, sans-serif;
  color: #0e1807;

  /*POSITION*/
  position:absolute;
    left:632px;
    top:410px;
  z-index: -1;

  /*CSS3*/
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

-webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
          transition: all 0.4s ease;          
}


.button2:hover .top {
  margin: -23px 0 0 5px;
  line-height: 25px;
}

.button2:hover .bottom {
  margin: 25px 0 0 5px;
}

.button2 a:active {
background: #22232e; 
background: -moz-linear-gradient(top, #22232e 0%, #623043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22232e), color-stop(100%,#623043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #22232e 0%,#623043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #22232e 0%,#623043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #22232e 0%,#623043 100%); /* IE10+ */
background: linear-gradient(top, #22232e 0%,#623043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22232e', endColorstr='#623043',GradientType=0 ); /* IE6-9 */
}

/*Pulls in Wings*/
.button2:active .bottom {
  margin: 25px 0 0 5px;
}

.button2:active .top {
  margin: -23px 0 0 5px;
}


.button3 a {

  display: block;
  position:absolute;
    left:833px;
    top:410px;
  height: 28px;
  width: 115px;
  background: #22232e;
  -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
   -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
        box-shadow: 0px 0px 8px rgba(0,0,0,0.2);


background: -moz-linear-gradient(top, #22232e 0%, #623043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22232e), color-stop(100%,#623043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #22232e 0%,#623043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #22232e 0%,#623043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #22232e 0%,#623043 100%); /* IE10+ */
background: linear-gradient(top, #22232e 0%,#623043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22232e', endColorstr='#623043',GradientType=0 ); /* IE6-9 */


  /*TYPE*/
  color: white;
  font: bold 11px/28px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase; 
}

p {
  background: #5a8a37;
  display: block;
  height: 25px;
  width: 105px; 
  margin: 0px 0 0 5px;

  /*TYPE*/
  text-align: center;
  font: bold 10px/25px Helvetica, Verdana, sans-serif;
  color: #0e1807;

  /*POSITION*/
  position:absolute;
    left:833px;
    top:410px;
  z-index: -1;

  /*CSS3*/
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

-webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
          transition: all 0.4s ease;          
}


.button3:hover .top {
  margin: -23px 0 0 5px;
  line-height: 25px;
}

.button3:hover .bottom {
  margin: 25px 0 0 5px;
}

.button3 a:active {
background: #22232e; 
background: -moz-linear-gradient(top, #22232e 0%, #623043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22232e), color-stop(100%,#623043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #22232e 0%,#623043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #22232e 0%,#623043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #22232e 0%,#623043 100%); /* IE10+ */
background: linear-gradient(top, #22232e 0%,#623043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22232e', endColorstr='#623043',GradientType=0 ); /* IE6-9 */
}

/*Pulls in Wings*/
.button3:active .bottom {
  margin: 25px 0 0 5px;
}

.button3:active .top {
  margin: -23px 0 0 5px;
}

Leid me alsjeblieft en help me waar het probleem ligt en welke veranderingen moeten worden aangebracht. Ik zal zeer verplicht zijn :) vriendelijke groeten

2
Voordat ik de HTML en CSS in mijn hoofd render, kun je ergens een live demo uploaden?
toegevoegd de auteur Blender, de bron
Ok, laat me de demo van deze pagina uploaden. Ik kom binnenkort terug met de link.
toegevoegd de auteur Amit Pattnaik, de bron

2 antwoord

Het zweven over één knopelement heeft geen invloed op de andere knopelementen. Het lijkt gewoon zo, omdat je de geanimeerde p -elementen die je gebruikt voor het effect zweven hebt misplaatst.

Bekijk de verbroken pagina nauwkeuriger. Als u de muisaanwijzer over de knoppen beweegt, verandert de bestandsgrootte die wordt weergegeven op de 3e knop. Dat komt omdat wanneer u met de muis over knop # 1 zweeft, de bestandsgrootte p van knop # 1 wordt geanimeerd; wanneer u de muis over knop # 2 houdt, wordt de bestandsgrootte p van knop # 2 geanimeerd; en wanneer u met knop # 3 zweeft, wordt de bijbehorende overeenkomende bestandsgrootte p geanimeerd.

Dus de browser doet precies wat je zou verwachten. Alleen de onderliggende elementen van de muisaanwijzer worden beïnvloed/geanimeerd.

Your real problem is that your CSS is telling them all to pop up over the 3rd button. This mistake most-likely occured when setting the absolute position of the p.top and p.bottom elements. If you inspect these DOM elements via Firebug or Chrome's DOM inspector, you'll see that they're all being placed behind button #3. Therefore, when they pop out, they pop out above/below button #3. So it looks like button #3 is being affected when you hover over button #1 & #2.

1
toegevoegd
Het spijt me, dat ik nog niet zo bekend was met deze site, ik was niet genoeg ondergelopen om uw antwoord hier te vinden. Ja, ik had de dingen zelf opgemerkt die je hier hebt aangegeven, maar ik kon er geen uitweg van krijgen.
toegevoegd de auteur Amit Pattnaik, de bron
Maar dankzij Bluefire is nu mijn probleem opgelost en voel ik me zo opgelucht en gelukkig. Het lijkt erop dat ik me als een klein kind gedraag maar dat is hoe ik me nu voel, een kind dat net is begiftigd met veel chocolaatjes: D
toegevoegd de auteur Amit Pattnaik, de bron

Werkt prima hier . Waarom gebruik je verschillende klassen voor de knoppen? Gebruik gewoon class = "button" in plaats van class = "button1" , class = "button2" en class = "button3" .

0
toegevoegd
Als je echt verschillende klassen wilt gebruiken, hier ga je .
toegevoegd de auteur Bluefire, de bron
@AmitPattnaik klik op het lege vinkje naast het antwoord om het te accepteren: D
toegevoegd de auteur Bluefire, de bron
Geen probleem. Voeg een andere klasse toe aan een van uw knoppen, genaamd button1. Als u meerdere klassen aan een element wilt toevoegen, gebruikt u de volgende syntaxis: - plaats dus spaties tussen de klassenamen. Daarna, na het toevoegen van de extra klas, ga je naar je CSS en plaats je wat positionering - bijvoorbeeld, voor je eerste knop zou het zijn .button1 {position: absolute; links: 430 px; top: 410px; } . Maak vervolgens vergelijkbare klassen voor de andere knoppen, met behulp van de positionering die u hierboven hebt opgegeven. Voorbeeld: jsfiddle.net/7fdPL
toegevoegd de auteur Bluefire, de bron
Gewoon zeggen, je lijkt niet veel te weten over CSS. Ik zou willen voorstellen de volgende deze tutorial - er is een heleboel dingen daar.
toegevoegd de auteur Bluefire, de bron
Heel erg bedankt @bluefire voor zo'n snel antwoord. Hmm, eigenlijk raakte ik in de war met de CSS, of het nu ging met knop 1, knop 2 enz. Of met alleen de originele class = "knop". Laat me proberen de wijzigingen die je hebt aangebracht in de codes op te nemen. Nogmaals heel veel dank :) Hartelijke groeten
toegevoegd de auteur Amit Pattnaik, de bron
Klaar :) Laat mij deze wijzigingen in mijn codes aanbrengen. Nogmaals bedankt.
toegevoegd de auteur Amit Pattnaik, de bron
sorry 2 heb je nog een keer lastig gevallen. Ik probeerde de wijzigingen die u voorstelde in de CSS .button {width: 200px; marge: 150 px auto; } wat het doet is alle 3 de knoppen r die verticaal op een afstand van 150 px van elkaar zijn geplaatst. Wat ik zoek is om de 1e downloadknop op positie links te plaatsen: 430px; top: 410 px; de 2e dwnld-knop links: 632 px; top: 410 px; de 3e dwnld-knop links: 833 px; top: 410 px; & dan de 4e knop op de linker knop: 430 px; top: 636px; enzovoorts. Kan Plz helpen met het plaatsen van de knoppen? Dit is hoe mijn pagina nu ryt is: link
toegevoegd de auteur Amit Pattnaik, de bron
Heel erg bedankt .. :)) Deze keer kreeg ik wat ik wilde hebben .. Mijn oprechte dank. Omdat ik een beginneling was, werkte ik sinds gisteren aan dit specifieke knopontwerp en de animatie ervan, waarbij ik mijn hoofd krabbelde met frustratie zonder resultaten maar dankzij deze site en heel veel dank aan u, nu is mijn probleem opgelost. Ik kan niet echt zeggen hoe opgelucht ik ben: D Nogmaals bedankt :)
toegevoegd de auteur Amit Pattnaik, de bron
je hebt helemaal gelijk. Zoals ik al zei, ik ben niet zozeer bezig met het ontwerpen van sites, maar ik ben meer in de frontend-ontwerpen met Photoshop. Maar ik heb altijd de drang gehad om nieuwe dingen te leren en uit te proberen, dus ik heb geprobeerd deze site zelf te ontwerpen, door een aantal internethandleidingen en boeken te gaan. Voordien had ik bijna geen kennis over CSS, maar onderweg probeerde ik de dingen op te pikken. Ik zal zeker de link doornemen die je hebt verstrekt. Als de basis bekend is, zal ik CSS-onderdelen in de toekomst gemakkelijker kunnen opnemen. nogmaals bedankt voor alle hulp en begeleiding
toegevoegd de auteur Amit Pattnaik, de bron