Question

我有两个div，涵盖两种形式。每当有人点击一个封面时，表格就会显示出来。问题是我想将其中一个提交按钮的显示更改为＆＃34; display：none＆＃34;每当有人点击其中一个封面时。我可以使用：target选择器在同一个HTML页面中的其他元素上提交动作的任何方式吗？

HTML：

<div id="wrapper">

    <!--The cover of the women form-->
    <div id="wcover"><h1><a href="#wcover">MALE</a> </h1></div>

    <form id="women">
             ...    
    </form>

    <input type="submit" form="women" value="Submit" class="submitButton" id="womenSubmit">

    <!--The cover of the men form-->
    <div id="mcover"><h1><a href="#mcover">FEMALE</a></div>

    <form id="men">
             ...
    </form>

    <input type="submit" form="men" value="Submit" class="submitButton" id="menSubmit">
</div>

的CSS：

#mcover{
    left: 183px;
    z-index: 1;
    top: 131px;
    position: absolute;
    width: 337px;
    height: 355px;
    background: #f4f4f2;
    -webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
    transition: height 2s;
}   


#wcover{
    right: 183px;
    z-index: 1;
    top: 131px;
    position: absolute;
    width: 337px;
    height: 355px;
    background: #f4f4f2;
    -webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
    transition: height 2s;
}   

#mcover:target {
    height: 0px;

}


#wcover:target {
    height: 0px;
}

Answer 1

试试这个

以下是相邻兄弟选择器

'#mcover:target + input.submitButton{
display:none;
}'

选择所有兄弟元素

'#mcover:target ~ input.submitButton{
display:none;
}'

如何使用：target选择器来影响不同的元素？

1 个答案: