当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Why is the anything below my "content" class faded on the active column?

问题描述:

I was wondering if anyone could give me an explanation on why anything below my "content" class in each column is faded? I would like it so that everything in the active column is visible (works to an extent) and everything in the non active columns is faded.

Live Test Version:

http://jsfiddle.net/Gc68V/

Here's the HTML:

 <div id="container">

<div id="header-bar">

<ul>

<li>

<a href="gallery.html">Gallery</a>

</li>

<li>

<p>| Dare.me |</p>

</li>

<li>

<a href="leaderboard.html">Leaderboard</a>

</li>

</ul>

</div><!--header-bar-->

<div class="columns">

<div id="left-column">

<p class="title left">Easy</p>

<p class="content">Feeling like a whimp?<br/>

Take one of our easy dares.</p>

<div class="circle-text"><div><a href="php/easy.php">Click <span class="bold">Here</span> For An Easy Dare</a></div></div>

<div id="test"><p>Test Text</p></div>

</div><!--left-column-->

<div id="centre-column">

<p class="title centre">Medium</p>

<p class="content">Feeling adventurous<br />

are we?</p>

<div class="circle-text"><div><a href="php/medium.php">Click <span class="bold">Here</span> For A Medium Dare</a></div></div>

</div><!--centre-column-->

<div id="right-column">

<p class="title right">Hard</p>

<p class="content">Feeling lucky?<br />

prepare yourself!</p>

<div class="circle-text"><div><a href="php/hard.php">Click <span class="bold">Here</span> For A Hard Dare</a></div></div>

</div><!--right-column-->

</div><!--columns-->

</div><!--container-->

& here's the CSS:

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* Fonts */

@font-face {

font-family: 'code_boldregular';

src: url('../fonts/code_bold-webfont.eot');

src: url('../fonts/code_bold-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/code_bold-webfont.woff') format('woff'),

url('../fonts/code_bold-webfont.ttf') format('truetype'),

url('../fonts/code_bold-webfont.svg#code_boldregular') format('svg');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'code_lightregular';

src: url('../fonts/code_light-webfont.eot');

src: url('../fonts/code_light-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/code_light-webfont.woff') format('woff'),

url('../fonts/code_light-webfont.ttf') format('truetype'),

url('../fonts/code_light-webfont.svg#code_lightregular') format('svg');

font-weight: normal;

font-style: normal;

}

/* Body & Container Styling */

body{

background-color: #fafafa;

}

#container{

width: 100%;

height: 100%;

}

/* Header Bar Styling */

#header-bar{

height: 50px;

width: 218px;

margin-left: auto;

margin-right: auto;

}

#header-bar ul{

padding-top: 19px;

}

#header-bar li{

list-style: none;

display: inline;

float: left;

}

#header-bar p{

font-family: 'code_boldregular';

font-size: 12px;

color: #414141;

padding-left: 5px;

padding-right: 5px;

letter-spacing: 1px;

}

#header-bar a{

font-family: 'code_lightregular';

font-size: 12px;

color: #898989;

text-decoration: none;

letter-spacing: 1px;

}

#header-bar a:hover{

color: #c0392b;

}

/* Column Holder & Hover Effect Styling */

div[id$="column"]{

width: 33.33%;

height: 100%;

position: absolute;

}

.columns{

background-color: #333;

width: 100%;

height: 100%;

position: absolute;

}

.columns:hover div{

transition: opacity linear .2s;

opacity:0.3;

}

div[id$="column"]:hover{

transition: border ease-out .1s,margin ease-out .1s,padding ease-out .1s;

z-index:200;

margin-left:-20px;

padding-left:20px;

border-right:solid 20px;

opacity:1;

}

/* Column Styling */

#left-column{

background-color: #27ae60;

left:0;

border-color:#27ae60;

}

#centre-column{

background-color: #e67e22;

left: 33.33%;

border-color:#e67e22;

}

#right-column{

background-color: #c0392b;

left: 66.66%;

border-color:#c0392b;

}

/* Column Text Styling */

.title{

font-family: 'code_boldregular';

font-size: 120px;

color: #fff;

margin-top: 82px;

text-align: center;

}

.title.left{

text-shadow: 2px 2px 0 #2ecc71;

}

.title.centre{

text-shadow: 2px 2px 0 #d35400;

}

.title.right{

text-shadow: 2px 2px 0 #e74c3c;

}

@media only screen and (max-width: 1700px) {

.title { font-size: 100px; }

}

@media only screen and (max-width: 1500px) {

.title { font-size: 80px; }

}

.content{

font-family: 'code_lightregular';

font-size: 36px;

color: #fff;

text-align: center;

margin-top: 16px;

}

@media only screen and (max-width: 1700px) {

.content { font-size: 30px; }

}

@media only screen and (max-width: 1500px) {

.content { font-size: 24px; }

}

.test-link{

margin-top: 150px;

text-align: center;

}

.test-link a{

font-family: 'code_lightregular';

text-decoration: none;

font-size: 36px;

color: #fff;

}

.bold{

font-family: 'code_boldregular';

}

.circle-text {

width:50%;

}

.circle-text:after {

content: "";

display: block;

width: 100%;

height:0;

padding-bottom: 100%;

background: #4679BD;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

}

.circle-text div{

float:left;

width:100%;

padding-top:50%;

line-height:1em;

margin-top:-0.5em;

text-align:center;

color:white;

}

网友答案:

Because when you write...

.columns:hover div{  
  transition: opacity linear .2s;    
  opacity:0.3;
}

...your saying fade every <div> that is a child of .columns.

You probably want the direct child CSS selector:

.columns:hover > div{  
  transition: opacity linear .2s;    
  opacity:0.3;
}

http://jsfiddle.net/Gc68V/1/

分享给朋友:
您可能感兴趣的文章:
随机阅读: