CODEWITHSUNDEEP
htmlcsscss-selectors
Chris
Chris

Reputation: 59501

issue with hover on nth-child

I'm creating a news section for a website with 4 tiles for each article. Odd tiles have a darker blue background-color and the even tiles have a lighter blue. (dark-light-dark-light)

Now I want to add a :hover effect where the element gets a slightly lighter color than its' default value. So the odd and dark-blue tiles get a slightly lighter color and the even and light-blue tiles get an even lighter blue color when this happens.

I have a problem with this hover effect though. So if I hover on the first tile (odd) it adds the :hover effect on the 3rd (also odd) tile as well.

How to do this for just the one I am hovering on?

.tile-text {
        width: 100%;
        height: 25%;
        display: table;
        background: #337AB7;
        color: #EFEFEF;
    }
    
    .top-tiles a:nth-of-type(odd) .tile-text {
    	background: #304770;
    }
    
    .top-tiles:hover a:nth-of-type(odd) .tile-text {
    	background: orange; //just test-colors
    }
    
    .tile:hover .tile-text {
    	background-color: red; //just test-colors
    }
    
    .tile-text div {
    	display: table-cell;
    	vertical-align: middle;
    	font-size: 20px;
    }
    <section class="top-tiles">
		<a href="#">
			<div class="tile">
				<div class="tile-pic" style="background-image:url('');"></div>
				<div class="tile-text"><div>Sample text</div></div>
			</div>
		</a>
		<a href="#">
			<div class="tile">
				<div class="tile-pic" style="background-image:url('');"></div>
				<div class="tile-text"><div>Sample text</div></div>
			</div>
		</a>
		<a href="#">
			<div class="tile">
				<div class="tile-pic" style="background-image:url('');"></div>
				<div class="tile-text"><div>Sample text</div></div>
			</div>
		</a>
		<a href="#">
			<div class="tile">
				<div class="tile-pic" style="background-image:url('');"></div>
				<div class="tile-text"><div>Sample text</div></div>
			</div>
		</a>
	</section>

As a side question, I also noticed that if I remove this: 

.top-tiles:hover a:nth-of-type(odd) .tile-text {
    background: orange; //just test-colors
}

then .tile:hover .tile-text only applies to the even-tiles. Why doesn't it apply to odd tiles as well?

Thanks!

Upvotes: 2

Views: 1455

Answers (2)

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

you problem lies here:

.top-tiles:hover a:nth-of-type(odd) .tile-text {
    background: orange; //just test-colors
}

whenever you hover your .top-tiles it will apply orange to every odd tile inside that element.

What you want is to add orange background whenever you hover only odd tile like this:

.top-tiles a:nth-of-type(odd):hover .tile-text {
    background: orange; //just test-colors
}

Upvotes: 3

vanntile
vanntile

Reputation: 2787

Try changing your css to this:

.tile-text {
    width: 100%;
    height: 25%;
    display: table;
    background: #337AB7;
    color: #EFEFEF;
}

.top-tiles a:nth-of-type(odd) .tile-text {
    background: #304770;
}

.top-tiles a:nth-of-type(odd):hover .tile-text {
    background: orange; //just test-colors
}

.top-tiles a:nth-of-type(even):hover .tile-text {
    background-color: red; //just test-colors
}

.tile-text div {
    display: table-cell;
    vertical-align: middle;
    font-size: 20px;
}

Upvotes: 4

Related Questions