Question

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

现在我想添加一个:hover效果，其中元素的颜色比它的颜色稍微浅一些。默认值。所以奇数和深蓝色的瓷砖颜色稍微浅一些，偶数和浅蓝色的瓷砖在发生这种情况时会变得更亮蓝色。

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

如何为我正在悬停的人做这件事？

＆＃13;

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

＆＃13;

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

＆＃13;

作为一个附带问题，我也注意到如果我删除它：

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

然后.tile:hover .tile-text仅适用于偶数图块。为什么它也不适用于奇数瓷砖？

谢谢！

Answer 1

尝试将您的css更改为：

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

Answer 2

你的问题在于：

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

每当您将.top-tiles悬停时，它都会将橙色应用于该元素内的每个奇数图块。

你想要的是在你只悬停奇怪的瓷砖时添加橙色背景：

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

悬停在nth-child上的问题

2 个答案: