悬停在nth-child上的问题-issuewithhoveronnth-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)

我正在为每个文章创建一个包含4个图块的网站的新闻部分。奇数瓷砖的背景颜色为深蓝色,偶数瓷砖的颜色为浅蓝色。 (暗光暗光)

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.

我有这个悬停效果的问题。因此,如果我将鼠标悬停在第一个图块(奇数)上,它还会在第3个(也是奇数)图块上添加:悬停效果。

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;
    }

    

		
			

				

				
Sample text
			
		
		
			

				

				
Sample text
			
		
		
			

				

				
Sample text
			
		
		
			

				

				
Sample text
			
		
	
 

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?

然后.tile:悬停.tile-text仅适用于偶数瓦片。为什么它也不适用于奇数瓷砖?

Thanks!

2 个解决方案

.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;
}

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

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