html - Make website action work on noscript -
i've website have work javascript disabled web browsers, website has lot of jquery animations controls display of content. i've make content correctly appear using <style> inside <noscript> tags modify "display" css rule.
now i'm stuck, i've form appears when click on button, right action catched jquery function modify "display" value don't know how css.
i've in mind using .button-class:active rule i'll need modify css rule make appear
here's example
.hide-div{ width:300px; display:none; } .mybutton:active { how can change ".hide-div" "display" value here? }
here's approach:
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; } explain:
the ~ selector, selects sibling element of left element, after itself. when button (or link) pressed, div shows, , while user hovers div, form stay visible.
fiddle: https://jsfiddle.net/1y0jrzs9/9/
update
you can add follow css rule, avoid difficult of hover fast form, or hover click pressed.
.hidden:before { z-index: 999; content: ""; display: block; position: relative; top: -30px; height: 100px; width: 100px; } the pseudo-element count part of div, when displays, considered hovered.
Comments
Post a Comment