如何使用顯示塊？

-1

我如何「激活」，在這個例子中，第二個測試：如何使用顯示塊？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 

hiddentext1 { 
    display: none; 
} 
something1:hover + hiddentext1 { 
    display: block; 
} 


hiddentext2 { 
    display: none; 
} 
something2:hover + hiddentext2 { 
    display: block; 
} 

</style> 


</head> 

<body> 
<something1>First test</something1> 
<hiddentext1>Text from first test.</hiddentext1><br /> 
<br /> 
<something2>Second test</something2> 

<table width="100" border="0" cellspacing="0" cellpadding="0" > 
    <tr> 
    <td><hiddentext2>Text from second test.</hiddentext2></td> 
    </tr> 
</table> 
</body> 
</html>

我想我需要設置一些標識爲表...？我不知道還有什麼要寫或要求...？

來源

2014-02-24 Emily Adler

查看這個你是什麼意思？請解釋發生了什麼事。什麼沒有發生，你認爲應該發生。 – j08691

那麼你的第二個hiddentext2是不是兄弟something2，所以你不能使用像這樣的相鄰選擇器。該表，但是，確實遵循它，所以用此表範圍之hiddentext2：

something2:hover + table hiddentext2 { 
    display: block; 
}

JSFiddle

希望這些名字古怪的標籤只是爲了你的測試目的。你應該使用有效和有意義的標籤，而不是你已經編好的標籤。

來源

2014-02-24 14:30:58 George

也謝謝你。 –

不確定你想要觸發什麼，所以第二個測試出現。但是讓我們假設你有一個按鈕，你需要做的是在JavaScript中，是這樣的：

<script> 
    jQuery(document).ready(function($){ 
      $("#button_trigger").click(function(){ 
       $("#second_answer").css("display", "block"); 

       return false; 
      }); 
    }); 
</script>

，並將HTML第二部分將是這樣的：

<a href="#">Answer number 2</a> 
<div id="second_answer"> 
     //your table and so on 
</div>

所以當用戶點擊該按鈕，第二個問題就會出現。

來源

2014-02-24 14:37:47

如果您的目標是將鼠標懸停在「something2」上時顯示「hiddentext2」框中的文本，則以下代碼將執行此操作。我也改變了非標準的標籤名稱爲的div類：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <style type="text/css"> 

    .hiddentext1 { 
     display: none; 
    } 

    .something1:hover + .hiddentext1 { 
     display: block; 
    } 


    .hiddentext2 { 
     display: none; 
    } 

    .something2:hover + table .hiddentext2 { 
     display: block; 
    } 

    </style> 


    </head> 

    <body> 


    <div class="something1">First test</div> 
    <div class="hiddentext1">Text from first test.</div> 

    <br /> 
    <br /> 

    <div class="something2">Second test</div> 

    <table width="100" border="0" cellspacing="0" cellpadding="0" > 
     <tr> 
      <td><div class="hiddentext2">Text from second test.</div></td> 
     </tr> 
    </table> 


    </body> 
    </html>

您可以在jsfiddle

來源

2014-02-24 14:44:08

啊謝謝你：o） –

如何使用顯示塊？

回答

相關問題