CSS和jquery懸停

編輯：在此編輯之前，我要求提供涉及CSS的解決方案。我被告知我需要使用Javascript才能完成以下任務CSS和jquery懸停

說明：我有一個類（profile-inner），用於顯示成員的完整配置文件。它的背景顏色是白色的。我得到了一個懸停工作的內部配置文件。它的背景色是灰色的。在「profile-footer」類中有「評論」鏈接。當它被點擊時，它切換類「inline-profile-comment」（展開/摺疊）。

問題：「profile-inner」懸停選擇整個容器，包括切換類「inline-profile-comment」。我不想要這個。我只想在未顯示「inline-profile-comment」時懸停。

的Html：

<div class="profile-inner"> 
    an entire profile 

    <div class="profile-footer"> 
     <a data-toggle="collapse" data-target="#<%= profile_item.id %>_comment"> 
     Comment</a> 
     <ul><li>lots of list items etc</li></ul> 

     <div class="inline-profile-comment"> 
     <div id="<%= profile_item.id %>_comment" class="show collapse"> 
    The comment form 
    </div></div> 

</div></div>

CSS：

.profile-inner { 
    background-color: rgb(255, 255, 255); 
} 

.profile-inner:hover { 
    background-color: rgb(243, 243, 243); 
    cursor: pointer; 
}

我希望我已經解釋過它不夠好。謝謝你的幫助。

來源

2012-10-08 Nathan Couch

CSS中沒有隱藏的元素選擇器。如果僅當'inline-profile-comment'隱藏時才需要'.profile-inner'上的懸停效果，則需要javascript。 –

我以爲會這樣，我應該注意到我意識到了這種可能性。我將爲未來的讀者編輯這個問題。 –

我認爲，如果你add/remove一類，你可以做到這一點的切換髮生後和css選擇懸停更改爲class，像

$('.profile-inner').toggleClass('hover'); 
$('.profile-footer a').on('click', function(e){ 
    e.preventDefault(); 
    $('.inline-profile-comment').toggle('fast',function(){ 
     $('.profile-inner').toggleClass('hover'); 
    }); 
});

CSS

profile-inner { 
    background-color: rgb(255, 255, 255); 
} 
.profile-inner.hover:hover { 
    background-color: rgb(243, 243, 243); 
    cursor: pointer; 
} 
.inline-profile-comment{ display:none; }

Working Example。

來源

2012-10-08 22:37:31

我將在我的代碼中實現這一點，並讓你知道它是如何發生的。謝謝！ –

我已經更新了一點，所以檢查更新的版本。 –

謝謝兄弟，效果很好。但是有一個干擾。該應用程序是一個Ruby應用程序，我使用twitter bootstrap gem。它已經建立在Javascript中，以解放演出的崩潰功能。我如何逃避內置函數並使用這個函數？因爲我認爲這兩個因爲切換不順利而干擾。 –

你可以做你所擁有的，加上補充一點：

.profile-inner:hover .inline-profile-comment { 
    background-color: Whatever it should be; }

來源

2012-10-08 22:27:04

是的，但我希望在課堂切換時將所有懸停在一起。儘管感謝您的幫助。 :) –

對不起，誤解了你最初的問題...... amustill的js解決方案是我如何做到這一點。 –

這裏是概念證明。我非常喜歡在對象的主要元素上切換狀態，在這種情況下，您的配置文件是內部的。基本上我們所做的就是使用'hide-comment'狀態來定義我們的CSS規則，切換評論表單和懸停。

http://jsfiddle.net/amustill/NgzU6/

來源

2012-10-08 22:37:31 amustill

我現在正在使用所有這些答案的解決方案，我會讓你知道它是怎麼回事。謝謝！ –

感謝您的意見。我已經在我的應用程序的另一部分中使用了這段代碼:) –

CSS和jquery懸停

回答

相關問題