I am moving clarification to the top of this post: When the mouse is not hovering over a certain div, I want elements other than this div to have a red background-color. Can this be achieved with a not() selector as seen in this post? The predicament appears to be that since the certain div is within a body element, the mouse will always be hovering over the body element even when it's over the certain div, thus the body will always have a red background-color.
I am trying to use the not() selector to affect elements when hovering over elements that are not within my selection.
For example:
[data-panel] { background-color:white; }
:not([data-panel=visible]):hover { background-color:red; }
<body>
<div data-panel='visible'>
<div data-panel='visible'>Content</div>
</div>
</body>
My desired outcome is that if the mouse is hovering anywhere besides those divs, the background-color will change to red (i.e. hovering in the body).
However, since those divs are within the body, that selector will always be active. The body will always be red. Is there anyway to style those divs so that this doesn't happen? Maybe something with z-index? Any clues?
What you are trying to do is not possible with CSS alone.
To achieve that effect – let the body turn red on :hover, but not when hovering the panels – you have to cancel the pointer event bubbling on the panels. This is only possible using JS.
BTW, HTML5 has a method to define own attributes: the data-* attributes; e.g. data-panel="visible".
Don't quote your attribute selector.
As already mentioned by James; panel is not a valid HTML5 attribute. You should be taking advantage of HTML5's data-* attributes.
:not([data-panel=visible]):hover {
background-color:red;
}
<div data-panel='visible'>
<div data-panel='visible'>Content</div>
</div>
This of course, affects all elements that don't have the matching attribute, including <body>, which is while your entire page's background will turn red when hovered.
Edit
The predicament appears to be that since the certain div is within a body element, the mouse will always be hovering over the body element even when it's over the certain div, thus the body will always have a red background-color
There is no CSS parent selector, so an event on an element within the body, can't have any say over any styles applied to the body.
Related
I'm trying to make a link clickable inside of an list element. The list elements are styled with an :after pseudo element, because of hiding the last characters inside the link.
Here is my jsfiddle
I need pure css solutions. I can make it work using JavaScript.
Thanks
I have no idea why you are using an :after pseudo like that or what you are trying to accomplish there.
But anyways, inorder to fix it and make the links clickable, you need to use pointer-events: none; on your :after pseudo and that should work for you.
Update your stylesheet like :
ul li:after {
content:'';
pointer-events: none; /* Add this */
/* Other properties */
}
Demo
This is happening not due to overflow:hidden; but due to the fact that your :after pseudo element is overlaying all other content 'blocking' the links.
As such, simply add pointer-events:none; to the :after pseudo so it doesnt register mouse events, which instead are 'passed through' to the links below
Updated Fiddle
More on pointer-events from MDN
The CSS property pointer-events allows authors to control under what
circumstances (if any) a particular graphic element can become the
target of mouse events.
In addition to indicating that the element is not the target of mouse
events, the value none instructs the mouse event to go "through" the
element and target whatever is "underneath" that element instead.
With that in mind- depending on required browser support- pointer events may not suffice.
I have a text input that is wrapped inside a div. I want to change a css attribute of the :after of the parent div when the input is focused. How can I do this in CSS?
<div class="dataInputTextContainer">
<input class="dataInputText" />
</div>
I tried this but it did not work:
.dataInputText:FOCUS ~ .dataInputTextContainer:after{
background-color: red;
}
Simply put, you cant
(sorry)
CSS works in terms of DOM decendancy, in that rules can only be constructed for elements which appear subsequently in the DOM. As such, you cannot select a parent, or even previous sibling.
What I would tend to suggest is that you sit down, take a step back and work out what you are trying to accomplish. 99% of the time either someone else out there has done it, or you can do it with a minor change to either your CSS or HTML.
Incidentally, a solution would not be to try and style :before or :after on the input, it is a replaced element so such elements do not apply. Why not simply add a label for the input and style it?
If you didn't apply style on :after of the parent but rather put a tag at the same level than the input, you could have used this syntax to apply style of the sibling tag.
I want to inspect CSS style of a list, applied by ul li:hover > ul {} rule in Firebug.
So the trick with checkbox on ":hover" won't work, cause I have to hover the inspected element's parent, not the element itself.
How do I inspect style applied to that kind of element? Is there any way I could move to the style panel with a hotkey, while holding the mouse over element's parent? Thanks in advance.
The best thing I managed to do is painfully and patiently Tab the focus to Style subwindow. It worked, but I wish there was a better way to do that.
I just released a tool that you can use to easily view the layout of all of your elements - even in their hover state.
HTML Box Visualizer - GitHub
Given the following code:
<div id="bla">
<p class="blubber">Johnny Bananas</p>
</div>
and the style in head of that html doc:
<style>
div#bla{background:yellow}
p.blubber{background:purple}
</style>
Why is it that the child will be coloured purple and overlay its parent?
The background property is not inherited by children by default. Therefore, the background style of div#bla does not apply to p.blubber, and p.blubber can specify its own background color independently of its parent and regardless of specificity.
And since background isn't being inherited, no overriding actually takes place.
When multiple style sheets are used, the style sheets may fight over control of a particular selector. In these situations, there must be rules as to which style sheet's rule will win out. The following characteristics will determine the outcome of contradictory style sheets.
check out the section on cascading order - http://htmlhelp.com/reference/css/structure.html
Because the specificity is the same, so the rule will apply to the p element. If you remove the p and just have .blubber, it wouldn't work.
Also, children can't override parents, so if there were more content, you'd see yellow around the p (add padding to the div).
Background color is not and inherited attribute in CSS.
I have a table, with a pretty nice style. Td and th elements, on hover, change their background color. However, if there is a disabled element in that row, it still displays lighter colors than things with disabled elements in them should look. Does anyone know a way to change the hover background if there is a disabled element inside? I can use jQuery.
I'd probably approach the problem by adding a class to the hovered item to modify its behavior when you disable child elements, as css won't let you set styles on a parent object based on properties of their children. Check out this post:
Complex CSS selector for parent of active child