html - 使网站操作在 noscript 上起作用

Question

我有一个网站必须使用禁用 javascript 的网络浏览器，这个网站有很多控制内容显示的 jquery 动画。我已经使用 <style> 使内容正确显示里面<noscript>标记修改“显示”CSS 规则。

现在我卡住了，我有一个表单，当有人点击按钮时会出现，现在这个 Action 被一个修改“显示”值的 jquery 函数捕获，但我不知道该怎么做类似 CSS 的东西。

我想到了使用 .button-class:active 规则，但我需要修改另一个 CSS 规则以使其出现

举个例子

    .hide-div{
    width:300px;
    display:none;
    }

.mybutton:active {
How can I change ".hide-div" "display" value from here?
}

Answer 1

这是一种方法:

HTML

<a class="show">Show</a>
<div class="hidden">I'm hidden!
    <input type="text" /></div>

CSS

.hidden {
    display: none;
}
.show:active ~ .hidden, 
.hidden:hover {
    display: block!important;
}

解释:

~ 选择器，在其自身之后选择左侧元素的任何兄弟元素。当按下按钮(或链接)时，div 显示，当用户将鼠标悬停在 div 上时，表单将保持可见。

fiddle : https://jsfiddle.net/1y0jrzs9/9/

更新

您可以添加遵循 css 规则，以避免快速悬停表单或按下鼠标悬停的困难。

.hidden:before {
    z-index: 999;
    content: "";
    display: block;
    position: relative; 
    top: -30px;
    height: 100px;
    width: 100px;
}

伪元素算作 div 的一部分，所以当它显示时，它被认为是悬停的。