如何在自己懸停時保持html顯示？

我之前在這裏找到了這個解決方案。如何在自己懸停時保持html顯示？

.hiding { 
    display: none; 
} 

.trigger:hover + .hiding { 
    display:table-row; 
}

它隱藏一個錶行，然後顯示它懸停在另一個錶行（類觸發）時。

問題：我想讓班級hiding顯示它何時懸停在自身上。當您不再在類trigger上徘徊時，它現在回到display:none。

來源

2013-05-29 Gio

你有沒有弄亂？現在試過任何東西？ –

我能想到的唯一的選擇是包裹各組.trigger和.hiding元件tbody內，並且基礎上tbody的所述:hover的顯示/隱藏行爲：

HTML：

<table> 
    <tbody> 
     <tr class="trigger"> 
      <td>text</td> 
     </tr> 
     <tr class="hiding"> 
      <td>hidden text</td> 
     </tr> 
    </tbody> 
    <!-- and so on... --> 
</table>

CSS：

tbody .hiding { 
    display: none; 
} 

tbody:hover .hiding { 
    display: table-row; 
}

JS Fiddle demo。

來源

2013-05-29 12:33:54

這會失敗，他正在使用'display：none;' –

這確實會「起作用」，但會引入大量不必要的標記。例如：http://jsfiddle.net/8pzUK/1/ – xec

@xec他編輯後，我評論:)但這一個是非常好的 –

您正在使用+這是一個相鄰的元素選擇，我會建議你的是纏繞的元素.hiding另一個元素中說類.test，比改變你的選擇一樣

.test .hiding { 
    display: none; 
} 

.test:hover .hiding { 
    display: table-row; 
} 

.trigger:hover + .test .hiding { 
    display:table-row; 
}

所以我們在這裏做是我們隱藏嵌套在.test在這種情況下是.hiding比我們使用:hover第二選擇以顯示.hiding當與.test元件懸停（由於它是存在的，但空如.hiding是display: none;內的元件）最後，但不是我們在第3聲明+之後添加.test最少的，只是要確保它不會打破規則.hiding沒有到.trigger較爲接近，我們有.test爲相鄰元素.trigger

來源

2013-05-29 12:37:26

非常好！學習大量的html/css，但陷入了這一點。謝謝！ – Gio

@Gio您歡迎:) –

你不能用CSS來做到這一點。你需要的jQuery或JavaScript

試試這個

$(document).ready(function(){ 
    $(".trigger").hover(function() { 
     $(this).css({"display" : "table-row"}); 
     //or u can add class like this 
     //$(this).addClass(""); 
    },function() { 
     //if you want return back, you can do here 
    }); 
});

如果你不回懸停功能，這將保留該懸停狀態。

來源

2013-05-29 12:42:59 PonrajPaul

您正在更改懸停元素的顯示值（即已顯示的元素...）爲什麼？ – xec

如何在自己懸停時保持html顯示？

回答

相關問題