如何分离两段代码的悬停效果以提供不同的属性

Question

我的第一个 post 不幸的是在这里找不到任何符合我需要知道的内容！

我不是一个经验丰富的编码员，但我一直在学习它，但本质上我的目标是对网站上的 2 个部分使用相同的 html & CSS 代码片段。当我在打开和关闭悬停时更改不透明度时，困难就来了。我想留在 }

`}
.fade:hover
{
        opacity:1;
}
.fade
{
        opacity:0.8;`

还有我需要的

`}
.fade:hover
{
        opacity:1;
}
.fade
{
        opacity:0.2;`

后者负责并更改原件的不透明度。是否有标签将两者分开？

非常感谢！任何帮助表示赞赏！

Answer 1

CSS 代表 Cascading Style Sheet，这意味着它读取文件，最后读取的内容将适用。因此，如果您对同一个 class 有 2 个定义，则后者将覆盖前者。这就是您只看到第二个操作的原因。

为了解决这个问题，不要对两个按钮都使用 1 class，而是使用 2 classes。

.fade1 {
    opacity: .2;
}
.fade2 {
    opacity: .8;
}
.fade1:hover {
    opacity: 1;
}
.fade2:hover {
    opacity: 1;
}

但更好的是，您可以通过以下操作将其简化为 3 个：

<!-- HTML code -->
<p class="fade fade1">some text</p>

/* CSS style */
.fade1 {
    opacity: .2;
}
.fade2 {
    opacity: .8;
}
.fade:hover {
    opacity: 1;
}

Answer 2

您遇到的问题是由 CSS 级联（CSS = 级联样式表）引起的。这意味着因为您定义了相同的 class 样式 (.fade) 两次，所以文件中最后定义的实例将优先并覆盖另一个。

解决此问题的方法是使用额外的 class 名称或增加 css 样式的特异性（这意味着您在 CSS 选择器中的特异性）。

示例 1，使用额外的 class:

.fade {
    opacity: .8;
}

.fade2 {
    opacity: .2;
}

.fade:hover, .fade2:hover {
    opacity: 1;
}

示例 2，增加特异性：

.section1 .fade {
    opacity: .8;
}

.section2 .fade {
    opacity: .2;
}

.fade:hover {
    opacity: 1;
}

Html 看起来像这样：

<div class="section1">
    <div class="fade">some content</div>
</div>

<div class="section2">
    <div class="fade">some other content</div>
</div>

如何分离两段代码的悬停效果以提供不同的属性

How to separate hover effect on two chunks of code to give different properties

html

css

hover