Is it possible to display:block; the :after pseudo-element when I hover over the parent element itself?
#myDiv{
position:relative;
width:50px;
height:50px;
border-style:solid;
background-color:red;
}
#myDiv:after{
position:absolute;
content:"";
display:none;
width:50px;
height:50px;
border-style:solid;
background-color:blue;
}
I have tired:
#myDiv:hover #myDiv:after{
display:block;
}
#myDiv:hover + #myDiv:after{
display:block;
}
#myDiv:hover > #myDiv:after{
display:block;
}
Yet no luck, here's a fiddle.
Change it to #myDiv:hover::after
You can use either :after or ::after but in the selectors module (3) it states that the latter is now intended to be used to distinguish them from pseudo-classes
You are trying to reference the same element, so you don't need to duplicate the ID selector. No need to use the child selector either, just use:
#myDiv:hover:after {
display: block;
}
jsFiddle Demo
Related
Here's what I'm trying to do. I currently have a vertical menu at the very tippy top of my web page. I structured it with this CSS code.
#main ul {
text-align:center;
padding:0;
margin:0;
list-style:none;
}
#main li {
display:inline;
vertical-align:middle;
line-height:50px;
}
#main a:link {
text-decoration:none;
color:black;
transition:0.5s;
padding:30px;
}
#main a:hover {
text-decoration:underline;
color:gray;
background-color:white;
padding:50px;
}
Bad thing is that when I get to the hover, I want the background to also change on top of the background that I've already set with my div. I can't seem to get it in the same height as my div while keeping the width at the place that it was at. What exactly do I have to do with my code to get it to work? Thanks in advance.
Add this CSS rule to make the a elements fill their parent elements:
#main a {
display: block;
with: 100%;
}
The following code doesn't work. I want to predefine the :before and :after to be used in everywhere in the code.
&:after, &:before{
content:""; display:block; width:100%; height:100%; border-radius:50%;
}
.myclass:after{background-color:red;}
But the following code works:
.myclass:after{background-color:red;
content:""; display:block; width:100%; height:100%; border-radius:50%;
}
What am I doing wrong in defining it?
Thanks.
* not(&) is the selector for "all"
*::after, *::before{
content:"";
display:block;
width:100%;
height:100%;
border-radius:50%;
}
& is used in SASS (and probably other pre-processors) to attach selectors like:
.test {
&::after, &::before { // renders to .test::after, .test::before
content:"";
display:block;
width:100%;
height:100%;
border-radius:50%;
}
}
Ive set up a testing FIDDLE with all the tools we need for tabs working horizontally.
The classes also exist to allow the tabs to work vertically on either the left hand or right hands side using different CSS classes. The problem is they are not then positioned correctly. This I imagine is due to the transform origin attribute but I am struggling.
http://jsfiddle.net/H7gG8/19/
.tabs {
width:400px; height:400px;
}
.tab {
position:relative;
}
.tab li {
border-radius:10px 10px 0 0; height:40px; width:110px; background:#DDD; float:left; cursor:pointer;
}
.tab.v {
-webkit-transform:rotate(90deg);
}
.tab li.l {
width:180px;
}
.tab.r {
-webkit-transform:rotate(-90deg);
}
.tab.r li {
float:right;
}
.tabs .conts {
height:100%; position:relative; clear:both;
}
.tabs .cont {
background:#EEE; height:300px; position:absolute; width:100%;
}
Reset the height attribute of the tab container to that of the entire tab framework ie. height:100%; add a top:-40px to the container and then for vertical tabs add right:0 and top:0;
http://jsfiddle.net/H7gG8/71/
Simples..
Why isn't my first-child selector working in Less?
.leftPanel{
margin:20px;
float:left;
display:inline;
width:620px;
margin-left:10px;
select{
width:300px;
&:first-child{
margin-right: 30px;
}
}
}
You are specifying that if the first child element inside a .leftPanel is a <select>, it should have margin-right: 30px;. If you are trying to apply this rule to the first child element inside the <select> (which should always be an <option>), try replacing &:first-child with option:first-child.
You can look here:
http://jsfiddle.net/vsjwww/n7kk3/17/
It all works fine, but as you see, the div, which will slide down, starts slide above the other div.
It looks like a CSS problem, how can we solve it?
Thanks..
Demo
You need the dropdown div to have the following css:
#will_slideDown
{
position:absolute;
top:100%;
left:0px;
}
and #has_hover_function needs position:relative;
Absolutely position the inner element at the bottom border of the outer element:
#has_hover_function, #will_slideDown
{
position:relative;
width:150px;
height:25px;
font-family:Arial;
text-align:center;
padding-top:3px;
border:1px solid gray;
background-color:#e7e7e7;
}
#will_slideDown {
position:absolute;
top:29px; /* 1px + 3px + 25px; */
left:0;
}