如何使用CSS3

應用的樣式我有下面的div和CSS，如何使用CSS3

.parent:hover{ 
 
    background-color:violet; 
 
} 
 
.child:hover{ 
 
    background-color:grey; 
 
}

<div style='border:2px solid red;width:200px;height:100px' class='parent'> 
 
</div> 
 
    <div style='margin-top:25px;margin-left:50px;border:2px solid gray;width:100px;height:50px' class='child'>  
 
    </div>

這裏的時候，我將鼠標懸停背景色紫羅蘭已經應用以及父我已經實現了兒童。但我需要實現當我懸停父母的孩子類也需要適用於相應的div ..以及當我懸停孩子的父類也需要申請在相應的div如何實現？

來源

2016-05-18 Akbar Basha

*當我懸停孩子的父類也需要應用* - 這是不可能的CSS。 – Harry

@Harry當你懸停子元素，那麼它已經懸停其父元素，你可以嘗試。 –

@HarshSanghani：仔細看問題的結構，然後發表評論:) – Harry

我試了一下哥們

我差點解決方案。

.parent:hover + .child{ background-color:violet; }

只需添加這個CSS，你會得到改變在這兩個DIV當u專注於父DIV。

它正在處理父項，因爲子div與父項相鄰。

但它不適用於孩子，因爲父母不在孩子旁邊。

只是試試我的css

來源

2016-05-18 06:22:26 Punit

不幸的是，這不能在CSS中完成，但它可以用一點點的jQuery完成。這裏是一個例子:) https://jsfiddle.net/qky6z3jv/

$(".parent,.child").hover(function() { 
    $(".parent").css('background-color','violet'); 
    $(".child").css('background-color','grey'); 
}, function() { 
    $(".parent,.child").css('background-color','white'); 
});

來源

2016-05-18 05:58:20 kknmalone

謝謝，但我需要實現使用CSS ... –

你可以使用簡單的JavaScript來做到這一點。

創建一個函數，將改變這兩個div的顏色，如爲每個div元素分配一個「ID」。

function changeColor(color_value){ 
    document.getElementById('div1').style.backgroundColor = "'" + color_value + "'"; 
    // or you can do something like this 
    document.getElementById('div1').setAttribute('background-color', color_value); 
    // do the same with the second div.   
}

和改變等

<div id="div1" onClick="changeColor('color_hex_value_here')" style='border:2px solid red;width:200px;height:100px' class='parent' 

</div> 
<div id="div2" onClick="changeColor('color_hex_value_here')" style='margin-top:25px;margin-left:50px;border:2px solid gray;width:100px;height:50px' class='child'> 
</div>

的div //這可以在不jQuery的完成或添加任何外部庫 //多一個此。你一個接一個地寫了兩個不同的div。 //可能是你關心試圖達到的概念是「父」裏面的「孩子」 DIV DIV

來源

2016-05-18 06:15:07

不需要使用Javascript和JQuery的解決方案.. –

偉大:)幫助 –

謝謝阿里，但有任何可能實現使用CSS :-) –

回答

相關問題