I have a situation where i have two elements which are same level in DOM (neighbours). When i hover element which is before in DOM i want the element below it to be shown. Also i want access child of the element Im showing and show its :before pseudo element.
SCSS
&__wrapper {
display: table;
table-layout: fixed;
&:hover {
+ .filter-time__shortcuts {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: scale(1) translateY(0);
.filter-time__shortcuts-list {
transform: scale(0.5);
&:before {
display: block;
}
}
}
}
Everything works except displaying of :before pseudo element. For some reason it cant access it but it can access .filter-time__shortcuts-list.
When i move the :hover to parent of both elements, where both are children and there is no need for + selector it works. Whats going on?
Compiled CSS
.filter-time__wrapper:hover + .filter-time__shortcuts .filter-time__shortcuts-list:before {
display: block; }
edit: https://codepen.io/riogrande/pen/vWExqN
Ok so the answer is that css really was accessing the :before element. The thing was when i wanted to access the dropdown with mouse I'm not really hovering the trigger anymore. When i put the hover on the parent I'm hovering the trigger (the whole parent) all the time.
Related
I make userstyles, in other words, third party CSS or custom CSS, and I'm replacing text with content property and the before and after pseudo elements. The problem is, to completely hide the original text, I have to set the original element's font-size to 0. This also hides things set in place with the hover pseudo element. I was going to just apply the hover properties to my before pseudo element, but then I would have to use 2 pseudo elements, which I don't think is possible. But, I'm not sure. Here's a sample similar to my code.
a.class[href="link"] {
font-size: 0;
visibility: hidden;
hover:
}
a.class[href="link"]:hover {
background-color: black;
}
a.class[href="link"]:before {
font-size: 16px;
visibility: visible!important;
content: "This text replaced what showed before";
}
a.class[
Currently I have a set of links with a div over them. I would like the div to disappear on mouseover allowing the links behind to be clickable.
:hover {display: none}
on the covering div causes a flickering effect at it's creating a loop so I can't do that.
:hover {background-color: rgba(0,0,0,0);}
also does not work as the div is still covering the links. I thought that adding a
:hover {pointer-events:none;}
could work but that also creates a flickering loop.
I basically want a div to not be there when I mouse over it, yet making it not there causes the :hover command to not read it as there, making it come back (...and the flickering begins)
This should work:
:hover {
pointer-events: none;
visibility: hidden;
}
The reason is that display: none physically removes the element, meaning you are no longer hovering it. Thus, it adds it back, and now, you're hovering it. That's why you get the flickering effect. visibility: hidden on the other hand, keeps the element exactly where it is, so you'll still technically be hovering it.
I lied, that is not going to work at all.
Here is a real solution:
HTML
<div class="container">
Hello
<div class="overlay"></div>
</div>
CSS
.container {
width: 50px;
height: 50px;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: black;
}
.container:hover .overlay {
display: none;
}
fiddle: https://jsfiddle.net/zqsn2fym/
When i inspect a div with class .mlm-clearfix, firebug shows this class name and its url twice in right panel. The style declarations of Easy Clear Method given for the class is
.mlm-clearfix:before,
.mlm-clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
When i removed one selector and modified it to
.mlm-clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
issue disappears. But this is not happening to other combined class selectors like
.search-table td input,
.search-table td select {
width: 200px;
}
css file is not linked twice. What could be the reason for this? Please help.
:before and :after are pseudo-elements. (The correct syntax for them is actually ::before and ::after). Selectors containing them don't style the selected element itself but define new elements, which will be styled.
The Firefox API Firebug (2.0.x) internally uses only allows to get all styles for a given pseudo-element. Though Firebug doesn't check whether there is already the same rule for another pseudo-element. So the rule will be displayed twice within the Style side panel.
This issue will be solved as soon as these pseudo-elements are displayed within the HTML structure inside the HTML panel instead of the Style side panel (see issue 5785).
I want to add image to every li, but I would like to display it only on mouse over.
However, I want to avoid 'moving' effect, which is consequence of new element (image) added to DOM. I tried to fix it with visibility:hidden, since that takes space, but without luck.
Here's the simple example, as you can see, on hovering these li's, they are moving on the right.
What is the simplest way to achieve this?
http://jsfiddle.net/UQAjh/
You'd want either position the :before pseudo element absolutely to prevent it from entering the layout flow when shown, or create the pseudo element independently from the :hover state at an opacity of 0 and set opacity to 1 when hovered.
Keeping :before out of layout flow
ul > li:hover:before {
/* all the other styles */
position: absolute;
left: 25px;
}
Fiddle: http://jsfiddle.net/marionebl/UQAjh/1/
Creating :before regardless of :hover state
ul > li:before {
/* all the other styles */
display: inline-block;
float: left;
opacity: 0;
}
ul > li:hover:before {
opacity: 1;
}
Fiddle: http://jsfiddle.net/marionebl/Nda6Z/1/
I've been having trouble making it so the links I have (which are nested in list elements) rotate when they're hovered over. I've been doing this:
li:hover {
color: #ff0000;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
I know the CSS is being applied, because the color changes. I know my syntax is correct, because when I tried the same thing, substituting nav for li, it worked. Is there a reason this won't work with lis in particular for some reason?
You could try changing the li selectors in your css to link selectors, then add
display:inline-block;
see http://jsfiddle.net/xKNrQ/. You could just add the display property to the li selector, but then you'd have to use a separate rule to apply the color change for <a> tags.
Is your li set as a block element?
This works: http://jsfiddle.net/dQNFF/1/
I added this CSS:
li {
display: block;
width: 100px;
height: 20px;
}