-2
Iveはnoobの質問を受け取りました。だから私は別のdivの下にdivを持っている、彼らは分離されているように見えるが、上のdivのクラスはその下のdivに影響を与えている。 divのようなものを終わらせる方法はありますか？ Iveが得たものを得た。メニューの最後のボタン、連絡先ボタンには、ホバー上で背景を変更するクラスがあります。これは、フォーム上を移動すると、その下のフォームdivに同じ効果があります。他のdivに影響を及ぼすdivsの問題
私は答えに永遠に感謝しています。
<html>
</head>
<style>
/*image scaling*/
.fix{ position:fixed;}
/*text fade into center***************************/
.animated{
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
.animated3{
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
} 100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInLeft {
0% {
opacity: 0;
-o-transform: translateX(-20px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
}
@-moz-keyframes fadeOutLeft {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(-20px);
}
}
@-o-keyframes fadeOutLeft {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
-moz-animation-name: fadeOutLeft;
-o-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
-webkit-animation-duration:5s;
-moz-animation-duration:5s;
-ms-animation-duration:5s;
-o-animation-duration:5s;
animation-duration:5s;
}
/*initial text on page
load/////////////////////////////////////////////////*/
.container {position: fixed; top: 25%; left: 10%; z-index:-2;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeinleft {from
{ transform:translateX(-30px)} to {
transform:translate(0px)}}
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;}
.fade-in:hover{
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fadeout{
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;}
.fadeout:hover{opacity :0;}
.box{
width: 500px;
height: 500px;
position: relative;
margin-top: 10%;
float: left;
background: transparent;
font-size:50px;
font-family:"Gill Sans", "Gill Sans MT",
"Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
text-shadow: 2px 1px black;
color:grey;
}
/*underline*//////////////////////////////////////
.underlined-example {
background-color: transparent;
position:fixed;
}
.underlined-example {
position: relative;
color: gray;
text-decoration: none;
font-size: 12px;
font-weight:bold;
display:inline;
}
.underlined-example:hover {
color: gray;
}
.underlined-example:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: blue;
visibility: hidden;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
.underlined-example:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
/*dropdown
menu.............................................*/
ul#mainNav > li {
float:left;
display:inline;
position:relative;
background-color:transparent;
cursor: pointer;
margin: 32px;
margin-top:-30;
}
.contain{
max-width:1300px;
min-width:1300px;
}
ul#mainNav > li:hover {
background:transparent;
color:gray;
cursor: pointer;
}
ul#mainNav > li:hover ul {
visibility: visible;
opacity: 1;
transition-delay: 0s, 0s;
}
ul#mainNav li ul {
position:absolute;
float:left;
height:0;
padding:15px 0px;
margin:0 ;
min-height: 300px;
min-width:100px;
visibility: hidden;
opacity: 0;
transition-property: opacity, visibility;
transition-duration: .4s, 0s;
transition-delay: 0s, .4s;
line-height: 2;
}
ul#mainNav ul li {
background-color:transparent;
}
ul#mainNav ul li:hover {
color:gray;
}
.bg1:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(http://
www.jewelsanddiamonds.com/wp-
content/uploads/178482443.jpg) no-repeat center;
background-size:cover;
-webkit-animation: fadeInLeft ;
-moz-animation: fadeInLeft ;
-ms-animation: fadeInLeft ;
-o-animation: fadeInLeft ;
animation: fadeInLeft ;
-webkit-animation-duration:1.3s;
-moz-animation-duration:1.3s;
-ms-animation-duration:1.3s;
-o-animation-duration:1.3s;
animation-duration:1.3s;
}
.bg2:hover:after{
content:'';
Z-INDEX:-2;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(http://d2aun19a9a38r2.cloudfront.net/
content- root/engagement/herStyle/ringsToSuitMyFinger.cdo/images
/201601061520/
HS_EngagementGuide_HERSTYLE_WhatRingStyleWillSuitMyFinger.jpg)
no-repeat center;
background-size:cover;
-webkit-animation: fadeInLeft ;
-moz-animation: fadeInLeft ;
-ms-animation: fadeInLeft ;
-o-animation: fadeInLeft ;
animation: fadeInLeft ;
-webkit-animation-duration:1.3s;
-moz-animation-duration:1.3s;
-ms-animation-duration:1.3s;
-o-animation-duration:1.3s;
animation-duration:1.3s;
}
.bg3:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(
http://legacyfinejewelers.com/wp-
content/uploads/2014/04/jewelry- background.jpg)
no-repeat center;
background-size:cover;
line-height: 2;
-webkit-animation: fadeInLeft ;
-moz-animation: fadeInLeft ;
-ms-animation: fadeInLeft ;
-o-animation: fadeInLeft ;
animation: fadeInLeft ;
-webkit-animation-duration:1.3s;
-moz-animation-duration:1.3s;
-ms-animation-duration:1.3s;
-o-animation-duration:1.3s;
animation-duration:1.3s;
}
.bg4:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(http://images.askmen.com/1080x540/style/watch_snob/
status- symbol-watches-1107395-TwoByOne.jpg) no-repeat center;
background-size:cover;
line-height: 2;
-webkit-animation: fadeInLeft ;
-moz-animation: fadeInLeft ;
-ms-animation: fadeInLeft ;
-o-animation: fadeInLeft ;
animation: fadeInLeft ;
-webkit-animation-duration:1.3s;
-moz-animation-duration:1.3s;
-ms-animation-duration:1.3s;
-o-animation-duration:1.3s;
animation-duration:1.3s;
}
.bg5:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(http://www.gia.edu/images
/74357_636x358_1355954767006.jpg) no-repeat center;
background-size:cover;
line-height: 2;
-webkit-animation: fadeInLeft ;
-moz-animation: fadeInLeft ;
-ms-animation: fadeInLeft ;
-o-animation: fadeInLeft ;
animation: fadeInLeft ;
-webkit-animation-duration:1.3s;
-moz-animation-duration:1.3s;
-ms-animation-duration:1.3s;
-o-animation-duration:1.3s;
animation-duration:1.3s;
}
.bg6:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(http://www.diamondjewelers.net/data/solder.jpg)
no-repeat center;
background-size:cover;
line-height: 2;
-webkit-animation: fadeInLeft ;
-moz-animation: fadeInLeft ;
-ms-animation: fadeInLeft ;
-o-animation: fadeInLeft ;
animation: fadeInLeft ;
-webkit-animation-duration:1.3s;
-moz-animation-duration:1.3s;
-ms-animation-duration:1.3s;
-o-animation-duration:1.3s;
animation-duration:1.3s;
}
.bg7:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(http://static1.squarespace.com
/static/55bb8a28e4b06ac0de4a4505/t/55cb5a9ae4b00b8482057f1f/1439390362391/)
no-repeat center;
background-size:cover;
line-height: 2;
-webkit-animation: fadeInLeft ;
-moz-animation: fadeInLeft ;
-ms-animation: fadeInLeft ;
-o-animation: fadeInLeft ;
animation: fadeInLeft ;
-webkit-animation-duration:1.3s;
-moz-animation-duration:1.3s;
-ms-animation-duration:1.3s;
-o-animation-duration:1.3s;
animation-duration:1.3s;
}
.bg8:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(gif2.gif) no-repeat center;
background-size:cover;
line-height: 2;
-webkit-animation: fadeInLeft ;
-moz-animation: fadeInLeft ;
-ms-animation: fadeInLeft ;
-o-animation: fadeInLeft ;
animation: fadeInLeft ;
-webkit-animation-duration:1.3s;
-moz-animation-duration:1.3s;
-ms-animation-duration:1.3s;
-o-animation-duration:1.3s;
animation-duration:1.3s;
}
.bg9:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(http://
legacyfinejewelers.com/wp-
content/uploads/2014/04/jewelry-
background.jpg)
no-repeat center;
background-size:cover;
line-height: 2;
-webkit-animation: fadeInLeft ;
-moz-animation: fadeInLeft ;
-ms-animation: fadeInLeft ;
-o-animation: fadeInLeft ;
animation: fadeInLeft ;
-webkit-animation-duration:1.3s;
-moz-animation-duration:1.3s;
-ms-animation-duration:1.3s;
-o-animation-duration:1.3s;
animation-duration:1.3s;
}
/*img size logo/////////////////////////////////////////*/
.logo{
margin-left:38%;
margin-right:40%;
pointer-events:none;
z-index:9999999;
}
/*page load up fades in////////////////////////////////////////////*/
.pageload{
-webkit-animation: fadein 1s;
-moz-animation: fadein 1s;
-ms-animation: fadein 1s;
-o-animation: fadein 1s;
animation: fadein 1s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
/*111111111111111111
11111111111111111111111111111
11111111111111111111111111111111111111111111*/
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
}
#feedback-page{
text-align:center;
}
#form-main{
width:100%;
float:left;
padding-top:0px;
}
#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color:#3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
/* Icons ---------------------------------- */
#name{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment{
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}
#button-blue{
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float:left;
width: 100%;
border: #fbfbfb solid 4px;
cursor:pointer;
background-color: #3498db;
color:white;
font-size:24px;
padding-top:22px;
padding-bottom:22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}
.submit:hover {
color: #3498db;
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease{
width:100%;
background-color:white;
}
@media only screen and (max-width: 580px) {
#form-div{
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
</style>
<div class="fix pageload">
<body>
<div class="logo">
<img src="logo.png"width="320" >
</div>
<div style="z-index:10;" class="contain">
<ul id="mainNav">
<li class="bg1 underlined-example" href="">JEWELRY</l>
<ul>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
</ul>
</li>
<li href="" class="bg2 underlined-example">ENGAGEMENT</l>
<ul>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
</ul>
</li>
<li href="" class="bg3 underlined-example">DIAMONDS</l>
<ul>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
</ul>
</li>
<li href="" class="bg4 underlined-example">WATCHES</l>
<ul>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
</ul>
</li>
<li href="" class="bg5 underlined-example">CUSTOM CAD</l>
<ul>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
</ul>
</li>
<li href="" class="bg6 underlined-example">REPAIR</l>
<ul>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
</ul>
</li>
<li href="" class="bg7 underlined-example">APPRAISAL</l>
<ul>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
</ul>
</li>
<li href="" class="bg8 underlined-example">OUR COMPANY</l>
<ul>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
</ul>
</li>
<li><a href="/webroot/contact page/contact.html" class="
bg9 underlined-example">CONTACT </l>
<ul>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
<li href="" class="underlined-example">OUR COMPANY</l>
</ul>
</li>
</div>
</div>
上記のdivには、下のdivに影響するbg9というクラスがあります。
<p class="name">
<input name="name"
type="text"
class="validate
[required,custom
[onlyLetter],
length[0,100]]
feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,
custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]]
feedback- input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
</div>
</div>
</body>
コードをplunkrに移動してください。非常に長いので、この方法をお手伝いすることは非常に難しいです。 – eavidan
hello sir。ちょうどいくつかのアドバイス：スタックオーバーフローの質問を投稿するときは、関連コードを与えるだけです。たとえば、あなたの例では、コードブロック全体を与える必要はありません。アニメーションやあなたのCSSの多くは省略することができます。この方法では、人々があなたのコードを読んで答えを出す方が簡単です。 –