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
Related
I have a table and I need to change the background color of the row after I click on it (as if it was selected). The problem is that I can't change the html, and currently I can change the background color of any .td using .td:focus, but not .tr.
So as a workaround - can I make it so that when selecting one .td:focus I also apply the same style to all .td elements at the same level (child elements of the same parent .tr element)? How can I achieve this?
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.
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 draggable div element with a hover style. This works fine, but the div contains some form elements (label, input). The problem is that when the mouse is over these child elements the hover is disabled.
<div class="app_setting">
<label">Name</label>
<input type="text" name="name"/>
</div>
.app_setting:hover {
cursor:move;
}
Any ideas how to get the hover to apply also to the child elements?
.app_setting *:hover { cursor:move }
At least 2 ways of doing it:
hover states for each child, either explicitly or with * selector, as suggested by garrow .class *:hover
cascade hover state to children .class:hover *
There are probably others
This isn't a css answer, but it might still be useful to you.
Someone else already suggested that you might have to resort to javascript for browser compatibility. If you do resort to javascript, you can use the jquery library to make it easy.
$(".appsetting").hover(hoverInFunc,hoverOutFunc);
This sets an event handler for hovering into and out of the selected element(s) as matched by the css style selector in the $() call.
You might have to resort to JS to make it happen for IE6.