Question

如何“激活”此示例中的第二个测试：

<!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>

我想我需要为表设置一些ID ...？我不确定还有什么要写或问......？

Answer 1

那么你的第二个hiddentext2不是something2的兄弟，所以你不能像那样使用相邻的选择器。但是，该表确实跟随它，因此请使用该表来确定hiddentext2的范围：

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

JSFiddle

希望这些奇怪命名的标签仅用于您的测试目的。你应该使用有效且有意义的标签，而不是你已经制作的标签。

Answer 2

如果您的目标是将鼠标悬停在“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

查看此内容

Answer 3

不确定要触发的内容，以便显示第二个测试。但是我们假设您有一个按钮，您需要在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>

因此，当用户点击该按钮时，将出现第二个问题。

如何使用显示块？

3 个答案: