gpt4 book ai didi

html - 带悬停的 CSS 条件语句

转载 作者:行者123 更新时间:2023-11-28 05:10:33 26 4
gpt4 key购买 nike

这个问题在条件 CSS 中可能更简单。

我有五行内容,根据某些条件,我添加了一个名为 'previous' 的类以显示不同的背景颜色。

当我将鼠标悬停在上一节课的内容上时,背景变得透明,这不太好。

即使鼠标悬停,我也想显示相同的背景颜色(灰色)。

所以,我尝试了下面的代码并尝试在 css 中使用 :has 条件,如果它有以前的类,将悬停颜色更改为灰色。但它没有用。

我的期望是即使悬停也有相同的背景颜色。

谁能帮我解决这个问题,因为我只需要 CSS/SCSS 的解决方案。不是来自 javascript。

.previous {
background-color: grey;
}
.row:hover {
background-color: transparent;
:has(.previous) {
background-color: grey;
}
}
<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>

最佳答案

您可以使用 :not 伪类来执行此操作,以从悬停效果中排除具有 previous 类的行。现在 :hover 将在每个具有 .row 类但不具有 .previous 类的元素上运行。

.row {
background-color: lightblue;
}

.previous {
background-color: grey;
}

.row:not(.previous):hover {
background: transparent;
}
<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>

关于html - 带悬停的 CSS 条件语句,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57107851/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com