CSS悬停选择器不工作
CSS悬停选择器不工作
提问于 2013-10-31 13:55:11
我希望当我在.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>回答 1
Stack Overflow用户
回答已采纳
发布于 2013-10-31 13:57:13
我建议：
.area:hover + .button {
/* CSS here */
}当上一个同级的.button元素悬停时，这种样式就是.area元素.
您的原始代码“不工作”的原因是，显然没有针对.area:hover或指定与该元素相关的.button元素的CSS选择器。
为了减少限制：
.area:hover ~ .button {
/* CSS here */
}这将在DOM中出现比悬停的.area元素晚的任何同级.area元素样式。
+是相邻的同级组合器(它只选择在.area之后立即出现的.button元素)，~是普通的同级组合器，它将选择跟随.area元素的所有.button元素。
参考文献：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19717275
复制
相似问题
jquery $(this).prev(".class")不工作
jquery ()和prev()不工作
jQuery: prev(<selector>)不工作？
rm -rf不工作，不确定原因
更新面板不工作，不确定原因
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
