Question

我正在尝试使用pseudo：hover on“special-offer-breaker”更改“special-offer-left-block”和“special-offer-right-block”的属性，但似乎我选择了它们不正确。关于我做错什么的任何想法？

当我悬停时没有任何事情发生，但我希望背景颜色改变！：）

希望这里的任何人都可以帮助我！

http://codepen.io/oskarscholander/pen/zBpRwV

<div class="special-offer-container">
  <div class="special-offer-breaker"></div>
  <div class="special-offer-left-block"></div>
  <div class="special-offer-right-block"></div>
</div>


$orange: #FFFF00

.special-offer-container
    position: relative
    width: 100%
    background: $orange
    height: 400px
    display: block

.special-offer-left-block   
    width: 50%
    height: 100%
    background: darken($orange, 20%)
    float: left
    display:inline
    transition: (background 2s ease-in)

.special-offer-right-block  
    width: 50%
    height: 100%
    background: lighten($orange, 30%)
    display: inline
    float: right
    transition: (background 2s ease-in)

.special-offer-breaker
    z-index: 4
    position: absolute
    margin: auto
    left: 0
    right: 0
    top: 0
    bottom: 0
    display: inline
    background: lighten($orange, 40%)
    border-radius: 75px
    width: 150px
    height: 150px
    &:hover
        .special-offer-left-block
            background: #333333

        .special-offer-right-block
            background: #333333

Answer 1

如果special-offer-left-block和special-offer-right-block是special-offer-breaker的子元素，那么你编写它的方式就会奏效，但相反，所有3个都是兄弟姐妹，所以

您需要使用常规兄弟选择器~

您也可以+使用.special-offer-left-block而~仅使用.special-offer-right-block，因为.special-offer-left-block位于special-offer-breaker

之后

有很多方法可以做这个具体的例子。但我建议这样做：

&:hover
    ~ .special-offer-left-block
        background: #333333

    ~ .special-offer-right-block
        background: #333333

〜combinator分隔两个选择器，只有当第一个元素前面有第二个元素时才匹配第二个元素，并且它们共享一个共同的父元素。

有关详细信息，请参阅此处 General sibling selectors

错误的伪选择器

1 个答案: