[英]CSS lighten child elements on parent mouseover
這是我的問題。
我有一個div
包含兩個其他divs
:基本上一個頭,一個內容。
當用戶將鼠標指向父div
時,我想要減輕 (改變alpha級別,或者歡迎其他一些方法)。 兩個兒童divs
顏色應該改變並變得稍微輕一些。 如果可能的話,我想避免使用javascript。
如何在CSS中執行此操作?
像這樣?
相關CSS:
#container:hover .inner {
opacity: 0.8
}
HTML:
<div id="container">
<div id="left" class="inner"></div>
<div id="right" class="inner"></div>
</div>
不相關的CSS:
#container {
width: 300px;
padding: 30px;
overflow: hidden
}
.inner {
width: 40%;
height: 250px;
background: #ccc
}
#left {
float: left
}
#right {
float: right
}
真正無關的CSS:
#container {
background: #fcecfc; /* old browsers */
background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcecfc), color-stop(50%,#fba6e1), color-stop(51%,#fd89d7), color-stop(100%,#ff7cd8)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0 ); /* ie */
}
#div:hover #div1{
color:#lightercolor;
}
#div:hover #div2{
color:#lightercolor;
}
您可以使用#div:hover嗎?
#parent_div:hover #child_div_1 { background-color: #333; }
#parent_div:hover #child_div_2 { background-color: #666; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.