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.
Related
I have a <input> inside a <div>.
Now if I use the pseudo-class :hover both of the elements gets the pseudo-class.
But If i use :focus only the <input> gets that pseudo-class.
I have read that only certain elements can have the :focus pseudo-class and <div> is not one of them.
Now I wonder if there is some other pseudo-class I can use that exist on both tags with similar behavior as :focus, but will appear on both tags like :hover does.
UPDATE:
plunker illustrating the problem.
Effectively, in order to be able to be focused, an element needs to be focusable:
An element is focusable if all of the following conditions are
met:
The element's tabindex focus flag is set.
The element is either being rendered or is a descendant of a canvas element that represents embedded content.
The element is not inert.
The element is not disabled.
In your case, the problem is the first condition. You can make the div focusable by setting its tabindex focus flag through a tabindex attribute.
p:focus {
background: #0f0;
}
<p tabindex="-1">Click me. I can be focused</p>
<p>But I can't :(</p>
However, there is a problem. There can only be one focused element in the document. Therefore, the div and the input can't be focused simultaneously.
In fact, you don't want to select the div when it is focused, you want to select it when it contains a focused element.
The Selectors Level 4 draft addresses this exact problem by creating the new :focus-within pseudo-class:
9.4. The Generalized Input Focus Pseudo-class:
:focus-within
The :focus-within pseudo-class applies to elements for which
the :focus pseudo class applies. Additionally, the ancestors
of an element that matches :focus-within also match
:focus-within.
Sadly browsers don't support it yet. So meanwhile, use JS.
I don't think you can do what you want with just CSSyou may need a bit of jquery like:
$(document)
.on("focus", "input", function(){
///here what you want, in this example add a class to your div
$('div').addClass("divfocus");
})
JSFIDDLE
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
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