當鼠標懸停一個Div時，它會使用CSS更改頁面上另一個Div的類別？

-2

我有一個Div「紅色」，在鼠標懸停時，我希望它將頁面上另一個Div「藍色」類更改爲「綠色」。當鼠標懸停一個Div時，它會使用CSS更改頁面上另一個Div的類別？

這2個div包含在不同的divs中，他們自己可以在下面看到，這可以使用CSS來完成嗎？如果不是如何做到這一點與jQuery的？

<div id="one"> 
    <div id="red">red</div> 
</div> 

<div id="two"> 
    <div id="three"> 
     <div class="blue">blue</div> 
    </div> 
</div>

謝謝。

來源

2014-04-12 Sm2345

你使用的jQuery或JavaScript？ –

它不能用CSS來完成，因爲在CSS中，沒有辦法將父母和兄弟姐妹排列在一起。不過，這在jQuery中是可行的。此外，在項目出現後命名類可能不是一個好主意 - 例如，如果將「.blue」的背景或文本顏色更改爲其他內容？它將失去其意義和背景。 – Terry

在CSS中是不可能的。你可以通過jquery輕鬆實現這一點 –

$('#red').hover(function() { 
$('#blue').addClass('.whatever') 
});

來源

2014-04-12 18:24:43 Shakesy

謝謝，如果我有這些功能中的2個，如果您看到只能執行一次該功能，我該如何從一個彈出到另一個：http://jsfiddle.net/teddyrised/7R3Dj/ – Sm2345

對不起，請使用此鏈接：http ：//jsfiddle.net/kAMG7/ – Sm2345

你必須解釋得更好一點。 – Shakesy

你將不得不使用Javascript來做到這一點。當文檔加載時，有一些代碼在一個div上有一個Hover，然後改變另一個。

試試這個：

$("#red").hover(function() { 
    $("#blue").addClass("SOMECLASSHERE"); 
}

來源

2014-04-12 18:22:17

您的選擇器是錯誤的。 – Terry

我認爲它現在已經修復。謝謝。 –

它不能用CSS來實現，如CSS沒有辦法來橫向起來父和它的兄弟姐妹。不過，這在jQuery中是可行的。另外，在項目出現後命名類可能不是一個好主意 - 例如，如果將.blue的背景或文本顏色更改爲其他內容？它將失去其意義和背景。

有，然而，一個基於jQuery的解決方案是可能的（見第roof-of-concept fiddle here）

$('#red').on('mouseover', function() { 
    $('.blue').removeClass('blue').addClass("green"); 
});

如果你想雖然切換一個班級，你應該這樣做：

$('#red').on('mouseover', function() { 
    $('.blue').removeClass('blue').addClass("green"); 
}).on('mouseout', function() { 
    $('.green').removeClass('green').addClass('blue'); 
});

來源

2014-04-12 18:24:42 Terry

我會建議使用Javascript來做到這一點，你不能改變只使用CSS的DIV的類，但是，您可以將CSS更改應用於另一個div上懸停的div上，該div可能具有相同的效果，但它在所有瀏覽器中都不兼容。

#one:hover #two#three.blue {color: green}

來源

2014-04-12 18:24:56 user13286

嘗試這個

$('#red').on('mouseover', function() { 
$('.blue').removeClass('blue').addClass("green"); 
});

來源

2014-04-12 19:08:05

謝謝，如果我有2個這些功能，如果您看到只能執行一次該功能，我該如何從一個功能彈出到另一個功能：http://jsfiddle.net/teddyrised/7R3Dj/ – Sm2345

對不起，請使用此鏈接：http ：//jsfiddle.net/kAMG7/ – Sm2345

當鼠標懸停一個Div時，它會使用CSS更改頁面上另一個Div的類別？

回答

相關問題