Question

我希望当我悬停[.area]类时，[.button]类更改但它不起作用。我该怎么办？

这是我的代码

#content { float:left; margin:0 20px 20px 0; }
.area { z-index:0; position:relative; border-radius:5px; border:3px #09B2D2 solid; height:430px; width:245px; transition: all .5s; }
.area:hover { background:#09b2d2; }
.area:hover .words { color:#fff; }
.head { background:#09b2d2; width:245px; margin-top:25px; text-align:center; font-family:Segoe UI; font-size:30px; text-transform:uppercase; padding:3px 0; font-weight:bold; color:#fff; }
.words { margin-top:25px; line-height:40px; text-align:center; color:#09b2d2; font-family:Segoe UI; font-weight:bold; transition: all .5s; }
.button { z-index:1; transition: all .5s; left:57px; background:#fff; top:-20px; border-radius:3px; border:2px solid #09B2D2; width: 125px; height: 40px; position:relative; text-align:center; }
.button:hover { background:#09b2d2; }
.button:hover .h1 { opacity:0; }
.button:hover .h2 { opacity:100; }
.h1 { transition: all .5s; z-index:2; margin:4px 0 0 -32px; font-weight:bold; color:#09B2D2; font-family:Segoe UI; font-size:20px; position:absolute; }
.h2 { margin:5px 0 0 -36px; transition: all .5s; z-index:2; opacity:0; font-weight:bold; color:#fff; font-family:Segoe UI; font-size:20px; position:absolute; }
.h2 > a { color:#fff; text-decoration:none;}

<div id="content">
    <div class="area">
        <div class="head">Başlangıç</div>
        <div class="words">Wordpress Teknolojisi</br>1 Yıl Alan Adı Tescili</br>500 MB Hosting</br></br>Seo Desteği</br>Ücretsiz Destek</br>Kontrol Paneli</div>
    </div>
    <div class="button">
    <span class="h1">100 TL</span>
    <span class="h2"><a href="#">Satın Al</a></span>
    </div>
</div>

Answer 1

我建议：

.area:hover + .button {
    /* CSS here */
}

当前一个兄弟.button悬停时，这会为.area元素设置样式。

您原始代码＆＃34;无法正常工作的原因＆＃34;是因为显然没有针对.area:hover的CSS选择器或指定与该元素相关的.button元素。

减少限制：

.area:hover ~ .button {
    /* CSS here */
}

这将设置DOM中稍后出现的任何同级.button元素的样式，而不是.area元素悬停的元素。

+是相邻兄弟组合子（它将选择仅 .button元素，该元素在{{1}之后立即显示 }），.area是通用兄弟组合子，它将选择跟随~元素的所有 .button元素。

参考文献：

CSS sibling combinators。

CSS悬停选择器不起作用

1 个答案: