하나의 CSS에서 다른 CSS 요소에 영향을 미치는 이유는 무엇입니까?

Question

먼저 내 질문에 대한 사과를 너무 길게 읽을 수 있습니다. 그러나 나는 나의 문제를 명확하게 설명하기를 원했고 그 이유는이 질문에 대한 오랜 설명이다. 첨부 한 코드를 살펴보고 실수를 바로 잡도록 도와주세요.

저는 기본적으로 웹 디자인이 아닌 아마추어 디자이너지만 내 자신의 페이지를 디자인하고 싶습니다. 따라서 Google의 도움을 받아 인터넷에서 다양한 자습서를 거쳐 내 페이지를 디자인했습니다. 그러나 나는이 다운로드 페이지에 갇혀있다! 특히 다운로드 버튼을 사용하십시오. 내 다운로드 페이지를하려는 방법

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

이입니다. 사용자가 잡지의 특정 버전의 특정 다운로드 버튼을 가리키면 다운로드 버튼 상단에있는 다른 하나는 하단에있는 &의 상단에있는 날개가 열립니다. 사용자가 버튼을 클릭하면 해당 특정 잡지 에디션의 압축 .RAR 버전을 다운로드 할 수 있습니다. 나는 "http://designshack.net/articles/css/downloadbutton/" 에서이 다운로드 버튼을 설계 배운이 효과가있을 것입니다 방법입니다 "http://designshack.net/tutorialexamples/animatedDownload/index.html"나는 성공적으로 개별 다운로드를 구축 관리

버튼을 사용하여 CSS에서 정확한 위치를 제공합니다. 그러나 페이지의 모든 버튼을 하나의 HTML과 하나의 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; 
} 

나를 인도하고 문제이며, 어떤 변화가 수행해야 할 경우 나 좀 도와주십시오

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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"> 
    <a href="#">Download</a> 
    <p class="top">Click to begin</p> 
    <p class="bottom">7.54 MB .RAR</p> 
</div> 
<body> 
<div class="button2"> 
    <a href="#">Download</a> 
    <p class="top">Click to begin</p> 
    <p class="bottom">7.8 MB .RAR</p> 
</div> 
<div class="button3"> 
    <a href="#">Download</a> 
    <p class="top">Click to begin</p> 
    <p class="bottom">7.05 MB .RAR</p> 
</div> 

</body> 
</html> 

이 내 CSS입니다 :

이

내 HTML입니다. 나는 매우 의무가있을 것이다 :) 감사합니다

Answer 1

작동 괜찮 here. 왜 버튼에 대해 다른 클래스를 사용하고 있습니까? class="button1", class="button2" 및 class="button3" 대신 class="button"을 사용하십시오.

Answer 2

하나의 단추 요소 위로 마우스를 가져가도 다른 단추 요소에는 영향을주지 않습니다. hover 효과를 위해 사용중인 애니메이션 p 요소를 잘못 배치했기 때문에 그런 식으로 보입니다.

깨진 페이지를 자세히 살펴보십시오. 단추 위로 마우스를 가져 가면 세 번째 단추에 표시된 파일 크기가 변경됩니다. 왜냐하면 버튼 # 1 위로 마우스를 가져 가면 버튼 # 1의 파일 크기가 p이 움직이기 때문입니다. 버튼 # 2 위로 마우스를 가져 가면 버튼 # 2의 파일 크기 p이 애니메이션으로 표시됩니다. 버튼 # 3 위로 마우스를 가져 가면 의 파일 크기가 p입니다.

브라우저는 예상 한대로 정확하게 작동합니다. 마우스 오버 버튼의 자식 요소 만 영향을 받거나 애니메이션으로 나타납니다.

귀하의 실제 문제는 귀하의 CSS가 제 3 버튼 위로 모든 팝업을 표시한다는 것입니다.이 실수는 p.top 및 p.bottom 요소의 절대 위치를 설정할 때 가장 많이 발생합니다. Firebug 또는 Chrome의 DOM 속성을 통해 이러한 DOM 요소를 검사하면 버튼 # 3 뒤에 모든 요소가 표시됩니다. 따라서 튀어 나오면 버튼 # 3 위/아래로 튀어 나옵니다. 단추 # 1 & # 2 위로 마우스를 가져 가면 버튼 # 3이 영향을받는 것처럼 보입니다.