jQuery mobile and jQuery UI wrap your elements with their own elements. Sometimes those wrapper elements have a :hover rule. If, for whatever reason, you don't want the hover rule to trigger what can you do?
an anti :hover class which keeps the element how you want it during hover
putting a div over top of the element
The problem is the anti-class will fail if you apply theming. You can build the class with getComputedStyles and Javascript but for some reason that only seems to preserve about 90% of the desired style.
The problem with the div over top is that :hover still gets triggered on the underlying div when the mouse touches the corner of the overlying div.
Create a newer more specific :hover selector for the element that undoes any CSS changes. You can read up on specificity, but the fastest way is normally to add an additional ancestor but keeping the rest of the selector.
For instance if the present selector is something like .jquery-ui-dialog .jquery-ui-button:hover {...} then adding a parent in like body .jquery-ui-dialog .jquery-ui-button:hover {...} will provide more specificity and thus override any conflicting rules.
Related
I want to fix some styling of a component which I'm importing. The component uses its own shadow root (I think), and inside of that shadow root is the div I want to add some styling to.
Now I've tried using :host(), and :host-context(), but for some reason it's not being selected. When I select the custom element itself, it does add some styling. However, I don't want to add styling to the custom element, but to an element inside of it.
Below is a screenshot of the custom element, folded open in the inspector in Chrome:
I want to add some styling to the div with class .mb-1. Does anyone know which selector I should use?
You can't do this for while, there are a nice explanation about here:
Is there a CSS parent selector?
As you, i'd like this feature, but isn't available.
I'm implementing an amp-user-notification element on an AMP-compliant page. My use case is slightly different than its recommendation: rather than a cookie dismissal prompt, I'm attempting to use it for a dismissible banner notification.
The element itself works as expected, including the use of a button to dismiss the notification. However, I want to adjust the layout so that it's static on the page, rather than a fixed-position element.
While I can adjust some CSS properties, position: fixed is added to the amp-user-notification element with !important declared on Google's end, and since AMP doesn't support the use of !important in my own custom CSS, I'm unsure of how to adjust this.
Is there a way to use amp-user-notification while not making the element sticky?
Is it possible to make a :hover on the :before element so that something shows over it?
Yes it can be done like..
.selector:hover:before {/* css rule goes here */}
It is impossible to add a :hover style (or :active, or :focus) to any elements like :before or :after. They would have to be applied to an actual HTML element, not a pseudo-element.
From your screenshot, it appears you're trying to create a hover menu. Depending on your styles, you may be able to apply the :hover styles to the ul itself. However, you'll only be able to control ul styles with CSS - you cannot control li styles based on the hover state of their parent without JS.
If JS is an option, use it - it should be pretty simple in this case, and would make the code a lot easier. If css-only is a requirement, you might be able to get around this by setting the <ul> to a specific height (large enough to show the hover item but nothing else), and give ul:hover a larger height, or height: auto;, etc.
Its called offcanvas
Refer https://www.w3schools.com/howto/howto_js_off-canvas.asp
AND https://v4-alpha.getbootstrap.com/examples/offcanvas/
Let me know if you require any further help
I'm using bootstrap for most of the page, but I'd like to use custom css in a div.col to get a nicer looking table, but the bootstrap css is affecting some of the styles.
I'd like to reset all the styles for a specific div and it's children.
Are there any ways of dealing with this other than explicitly overloading every style bootstrap uses?
To reset all the styles for a specific div, you can add the 'all: unset;' CSS property.
<div style="all: unset;">...</div>
This will undo ("unset") all the styles currently applied to that div (but not it's children), leaving you to add which ever ones you desire.
See it in action here (including how to apply to all child elements):
http://codepen.io/esr360/pen/kkogwm?editors=1100#0
This is a bootstrap accordion that has been "unstyled".
View browser support here: http://caniuse.com/#feat=css-unset-value
Unsurprisingly this doesn't work in IE.
On my last one, I asked how to make unfocusable elements become focus-able in the means of css selector. The answer is to use tabindex.
Now I wanted that, when an element with the selector is focused (clicked), the other element selected by the selector also got the effect. It may sound strange, but I could do that a long time ago accidentally, but I forgot how.
Here is the jsfiddle example :
http://jsfiddle.net/s4nji/xa8j4/
This selector does the trick:
li[tabindex='1']:focus ~ li[tabindex='1'], li[tabindex='1']:focus {
background: black;
color: white;
}
Here's an example.
It only selects both when you focus on the first one though.
This only works in CSS3 since we're using the general sibling selector.
When the first one is focused, it selects the second one with the same tabindex and adds the background. The second li[tabindex='1']:focus is to apply the background to the currently focused one too.
The general sibling selector can only select succeeding elements with the same parent. CSS can't travel up the DOM, unfortunately. For this reason, the only way to have it work backwards too would be to use Javascript.