Question

好的，所以我正在处理的网站进入了一个阶段，它需要在没有任何javascript加载的情况下工作 - 没有jQuery，没有JS，没有特殊的插件 - 只是纯HTML5 / CSS3。这样做的原因是减少了javascript开销，只使用javascript来实现非关键功能。因此，现在所有链接都加载页面而不是使用AJAX，并使用AJAX减少流量和文件大小。

我今天遇到的问题是使用：悬停状态显示下拉表单 - 应用转换到下拉列表，因此当将光标移动到下拉列表外时它不会立即消失。但是，在禁用javascript的情况下（在Chrome和Firefox中都进行了测试），在隐藏之前，下拉列表中的下拉列表会在加载之前显示。发生的情况是在页面加载时使用了转换延迟，一旦该计时器到期，下拉列表就会消失。

这是CSS：

.topmenu {
    position:absolute;
    top:100%;
    right:0;
    width:29%;
    z-index:10;
    /*display:none;*/
    visibility:hidden;
    opacity:0;
    transition:visibility .1s 2s, opacity .1s 2s;
}
.right .hover + .topmenu, .right:hover .topmenu {
    transition-delay:.1s;
    visibility:visible;
    opacity:1;
}

我的问题是 - 有没有办法在页面加载时隐藏子菜单（.topmenu）而不使用javascript？它可以在启用javascript时按预期工作，但重点是让它在没有javascript的情况下工作，即使在页面加载时也是如此。一旦它消失，它就会按预期工作。

第二个问题是 - Firefox和Chrome都使用javascript来解析CSS吗？没有任何意义，这种行为是固有的。只是为了更多的背景，我尝试使用Noscript插件的Firefox，并使用Chrome设置和Quick Javascript Switch（我禁用QJS并尝试使用本机javascript disabler开关来查看这是否是插件/扩展程序问题）。

UPDATE：这是一个实际的代码示例，但是在jsfiddle中没有显示问题，因为如果没有启用javascript，你就无法运行jsfiddle。至少你可以看到代码，也许可以从中提供一些见解。

jsfiddle

禁用Javascript CSS3转换问题

0 个答案: